Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt

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!

Box-Modell mit Hintergrundbild background-image:

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:

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;

Weiterempfehlen • Social Bookmarks • Vielen Dank

Wenn Sie einen Fehler finden, bitte mitteilen (egal ob Schreibfehler oder inhaltlicher Fehler).

Mit Maus fehlerhafte Stelle markieren und übernehmen mit folgendem Button:



(kann angegeben werden)

Nach Absenden kommt hier Feedback! Bitte nicht doppelt absenden. Danke.

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Fehler melden

Vielen Dank für Ihre Hilfe