Videos eBook Forum Kontakt

jetzt Videos kaufen
zum Lernen von HTML,
CSS und Webdesign

Jetzt das HTML-Seminar bestellen als
Video-Tutorial mit über 210 Videos:
von den Grundlagen bis zur fertigen Website
Video-Kurs HTML5, CSS & Webdesign

Video-Kurs bestellen HTML5, CSS & Webdesign
Video-Kurs bestellen HTML5, CSS & Webdesign

Hintergrundbilder platzieren/wiederholen und fixieren – background

Im letzten Kapitel haben wir die CSS-Anweisung kennen gelernt, um ein Hintergrundbild in einen Bereich zu integrieren. Zur Erinnerung hier der Code:

<div id=box1>
<p>Hier kann steht ein Inhalt und hinter 
dem Inhalt wird das Bild in den DIV-Bereich platziert</p>
</div>

Und nun brauchen wir in CSS die Anweisung, dass ein Bild in den Hintergrund platziert werden soll. Wir packen ein Bild von einem Kolibri in den Hintergrund (das Bild kann zum Testen unter https://www.html-seminar.de/bilder/kolibri.png heruntergeladen werden).

#box1 {
  width: 500px;
  height: 400px;
  background-color: white;
  background-image: url("https://www.html-seminar.de/bilder/kolibri.png");
}

Wenn wir das Ergebnis uns ansehen, haben wir einen ganzen Schwarm an Kolibris in unserem Hintergrund:

Hier kann steht ein Inhalt und hinter dem Inhalt wird das Bild in den DIV-Bereich platziert

Füllverhalten von Hintergrundbild festlegen – background-repeat

CSS gibt uns die Möglichkeit über background-repeat: festzulegen, wie die Wiederholung für das Hintergrundbild gehandhabt werden soll. Dafür gibt es 4 mögliche Wert:

  • background-repeat: repeat; /* Standardvorgabe */
  • background-repeat: repeat-x;
  • background-repeat: repeat-y;
  • background-repeat: no-repeat;

Standardmäßig wird die Hintergrundgrafik solange wiederholt, solange diese in den vorhandenen Platz passt. Zur Not auch nur als Ausschnitt.

Bei den Werten repeat-x und repeat-y wird die Grafik nur in einer Richtung wiederholt.

Bei dem Wert no-repeat wird die Hintergrundgrafik nur einmal links oben platziert. Diese Platzierung kann man beeinflussen (siehe nächsten Abschnitt).

Platzieren vom Hintergrundbild – background-position

Ist das Hintergrundbild über no-repeat nur einmal vorhanden wird dieses automatisch in der linken oberen Ecke platziert.

Diese Platzierung können wir über die CSS-Anweisung background-position: beeinflussen. Folgende Beispielwerte sagen viel über die Verwendung. In den ersten 4 Wertzuweisungen werden die Ecken direkt bezeichnet.

  • background-position: center center;
  • background-position: right center;
  • background-position: left bottom;
  • background-position: center top;

Genauso können auch Prozentangaben festgelegt werden. Dabei ist der erste Wert die X-Achse und der zweite Wert die y-Achse:

  • background-position: 20% 90%;
  • background-position: 50% 50%;

Und es können absolute Werte in Pixel mitgegeben werden, wobei hier auch Minuswerte möglich sind (unbedingt probieren!).

  • background-position: 100px 100px;
  • background-position: -70px 100px;

Den Hintergrund festkleben über background-attachment: fixed;

Natürlich kann man sich fragen, warum wir den Hintergrund festkleben sollten. Dadurch sind nette Effekte möglich. Stellen Sie sich einfach vor, wir platzieren ein Hintergrundbild in unser Element „body“. Was passiert, wenn wir es festkleben? Auch wenn mehr Inhalt vorhanden ist und der Besucher scrollen muss, bleibt unser Bild einfach stehen – bitte testen!

body {
  background-image: url("hintergrundbild.png");
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
}

Und soll das Bild noch den kompletten Hintergrund abdecken, dann im Kapitel zu Responsive Webdesign und Bilder nachschlagen.

Kurzschreibweise für CSS-Anweisung background:

Weil es praktisch ist, gibt es auch eine Kurzschreibweise. Anstelle der obigen einzelnen CSS-Anweisungen kommen einfach alle Werte – wichtig ist die Reihenfolge, wobei auch einzelne Werte fehlen dürfen (solange die Reihenfolge eingehalten wird).

background: FARBE URL REPAT PLATZIERUNG-X PLATZIERUNG-Y;

Und das Ganze mit Werten zum besseren Verständnis:

background: green url("hintergrundbild.png") no-repeat center center;