Hintergrundbilder platzieren/wiederholen und fixieren – background-image:

Im letzten Kapitel haben wir das Box-Modell kennen gelernt. Hinter dem eigentlichen Inhalt, dem Text, kann ein Hintergrundbild integriert werden. Dieses liegt vor der Hintergrundfarbe!

Um ein Bild in den Hintergrund einzubauen, wird folgende CSS-Anweisung benötigt:

background-image: url("DATEINAMEBILD.JPG");

Auch wenn der background-image: sehr merkwürdig aussieht mit dem Attribut url("DATEINAMEBILD.JPG") - aber so funktioniert der Befehl!

Unser HTML-Code zum Testen vom CSS-Hintergrundbilder:

<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). Oder man kann die komplette externe URL in die CSS-Anweisung schreiben (was man für ein eigenes Projekt nicht machen sollte).

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

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

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;