CSS: Hintergrund

Auf dieser Seite werden sämtliche CSS-Eigenschften vorgestellt, mit denen für ein HTML-Element eine Hintergrundfarbe oder ein Hintergrundbild festgelegt werden kann. Eine auf dem Server vorhandene Bilddatei wird im CSS-Code referenziert und kann mit weiteren Eigenschaften positioniert werden. Sämtliche hier beschriebenen Eigenschaften können auch in Kurzform zusammengefasst angegeben werden.

Hintergrundfarbe – `background-color`

W3C Standard

Über die Eigenschaft background-color lässt sich die Hintergrundfarbe eines Elements festlegen. Wie Farbwerte notiert werden, siehe Farben. Mit dem Wert transparent lässt sich eine Farbe entfernen.

Hier ein paar Beispiele:

Code kopieren

<p style='background-color:orange;'>Lorem ipsum dolor sit amet.</p>
<p style='background-color:green;background-color:transparent;'>Invidunt ut labore et dolore.</p>
<p style='background-color:#993300;'>Consetetur sadipscing elitr.</p>
<p style='background-color:rgb(120,24,36);'>Sed diam nonumy eirmod tempor.</p>
<p style='background-color:rgb(10%,35%,27%);'>Invidunt ut labore et dolore.</p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Invidunt ut labore et dolore.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Invidunt ut labore et dolore.

Hintergrundbild – `background-image`

W3C Standard

Über die Eigenschaft background-image lässt sich für ein Element ein Hintergrundbild festlegen. Geeignete Dateiformate sind PNG, JPEG, GIF und mit Einschränkungen auch das unkomprimierte Format BMP.

Die Eigenschaft background-image erwartet neben none (kein Bild) einen Wert in folgender Form:

background-image:url("Bilddatei.jpg");

Ist zusätzlich zu einem Hintergrundbild auch eine Hintergrundfarbe angegeben, so dominiert das Hintergrundbild, unabhängig davon, in welcher Reihenfolge die Eigenschaften notiert sind.

Hier ein paar Beispiele:

Code kopieren

<p style='background-image:url("img/background1.png");'><b>Lorem ipsum dolor sit amet.</b></p>
<p style='background-image:url("img/background2.jpg");background-image:none;'><b>Invidunt ut labore et dolore.</b></p>
<p style='background-image:url("img/background4.bmp");'><b>Consetetur sadipscing elitr.</b></p>
<p style='background-image:url("files/background3.svg");background-color:#0099ff;'><b>Sed diam nonumy eirmod tempor.</b></p>
<p style='background-image:url("img/background1.png");background-color:green;'><b>Lorem ipsum dolor sit amet.</b></p>
<p style='background-color:green;background-image:url("img/background2.jpg");'><b>Invidunt ut labore et dolore.</b></p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet.

Invidunt ut labore et dolore.

Consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor.

Lorem ipsum dolor sit amet.

Invidunt ut labore et dolore.

Wiederholung – `background-repeat`

W3C Standard

Über die Eigenschaft background-repeat lässt sich einstellen, in welche Richtung(en) das Hintergrundbild eines Elements wiederholt wird. Wird kein Wert angegeben, wird das Hintergrundbild sowohl horizontal als auch vertikal wiederholt. Die Eigenschaft erwartet folgende Werte:

• repeat – Wiederholung horizontal und vertikal
• repeat-x – Wiederholung nur horizontal
• repeat-y – Wiederholung nur vertikal
• no-repeat – keine Wiederholung

Hier ein paar Beispiele:

Code kopieren

<p style='background-repeat:repeat;background-image:url("img/background1.png");background-color:#333;'><b>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</b></p>
<p style='background-repeat:repeat-x;background-image:url("img/background1.png");background-color:#333;'><b>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</b></p>
<p style='background-repeat:repeat-y;background-image:url("img/background1.png");background-color:#333;'><b>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.</b></p>
<p style='background-repeat:no-repeat;background-image:url("img/background1.png");background-color:#333;'><b>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</b></p>

Dieser Code führt zu folgender Darstellung:

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.

Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.

Hintergrundposition – `background-position`

W3C Standard

Über die Eigenschaft background-position lässt sich die horizontale und vertikale Position des Hintergrundbildes eines Elements festlegen. Wird kein Wert angegeben, so befindet sich das Hintergrundbild in der linken oberen Ecke des Elements (sofern ebenfalls gilt: background-repeat:no-repeat). Die Eigenschaft erwartet einen oder zwei der folgenden Werte:

Für die horizontale Position:
• left – links
• center – horizontale Mitte
• right – rechts
• einen Zahlenwert in einer üblichen Einheit (z. B. px oder em)
• eine Prozentangabe

Für die vertikale Position:
• top – oben
• center – vertikale Mitte
• bottom – unten
• einen Zahlenwert in einer üblichen Einheit (z. B. px oder em)
• eine Prozentangabe

Numerische Längenmaße oder Prozentangaben beziehen sich auf die linke obere Ecke. Negative Werte verschieben das Hintergrundbild nach außerhalb des Elements. Wird nur ein Wert (horizontal) angegeben, so wird für die vertikale Position center angenommen, ansonsten gilt der erste Wert für die horizontale und der zweite für die vertikale Position. Es kann auch explizit die Position nur einer Richtung angegeben werden: mit der Eigenschaft background-position-x für die horizontale und mit background-position-y für die vertikale Position.

Hier ein paar Beispiele:

Code kopieren

<p style='background-position:center;background-repeat:no-repeat;background-image:url("img/background1.png");'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background-position:left;background-repeat:no-repeat;background-image:url("img/background1.png");'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background-position:left;background-repeat:repeat-x;background-image:url("img/background1.png");'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background-position:bottom right;background-repeat:no-repeat;background-image:url("img/background1.png");'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.</p>
<p style='background-position:90% -10px;background-repeat:no-repeat;background-image:url("img/background1.png");'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

Dieser Code führt zu folgender Darstellung:

Hintergrundgröße – `background-size`

W3C Spezifikation

Über die Eigenschaft background-size lässt sich die Größe des Hintergrundbildes eines Elements festlegen. Wird kein Wert angegeben, so wird die Originalgröße des Bildes verwendet (auto). Ansonsten können für die Breite und Höhe Werte in Pixeln oder Prozent angegeben werden. Außerdem existieren folgende Schlüsselwörter:

• cover – Das Bild wird so skaliert, dass es die Fläche des Elements vollständig ausfüllt.
• contain – Das Bild wird so skaliert, dass es vollständig in die Fläche des Elements passt.

Hier ein paar Beispiele:

Code kopieren

<div style='background-size:auto;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-size:100px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-size:100px 100px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-size:contain;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-size:cover;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>

Dieser Code führt zu folgender Darstellung (zur Bildquelle):

Hintergrundursprung – `background-origin`

W3C Spezifikation

Über die Eigenschaft background-origin lässt sich der Ursprung des Hintergrundbildes eines Elements festlegen. Es existieren folgende Schlüsselwörter:

• border-box – Das Hintergrundbild beginnt in der Rahmenbox.
• padding-box – Das Hintergrundbild beginnt in der Boxauffüllung. (Vorgabe)
• content-box – Das Hintergrundbild beginnt in der Inhaltsbox.

Hier ein paar Beispiele:

Code kopieren

<div style='background-origin:border-box;border:10px solid transparent;padding:10px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-origin:padding-box;border:10px solid transparent;padding:10px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-origin:content-box;border:10px solid transparent;padding:10px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>

Dieser Code führt zu folgender Darstellung:

Hintergrundausschnitt – `background-clip`

W3C Spezifikation

Über die Eigenschaft background-clip lässt sich der Ausschnitt des Hintergrundbildes eines Elements festlegen. Es existieren folgende Schlüsselwörter:

• border-box – Das Hintergrundbild füllt Rahmenbox, Boxauffüllung und Inhaltsbox. (Vorgabe)
• padding-box – Das Hintergrundbild füllt Boxauffüllung und Inhaltsbox.
• content-box – Das Hintergrundbild füllt die Inhaltsbox.

Hier ein paar Beispiele:

Code kopieren

<div style='background-clip:border-box;border:10px solid transparent;padding:10px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-clip:padding-box;border:10px solid transparent;padding:10px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>
<div style='background-clip:content-box;border:10px solid transparent;padding:10px;margin-bottom:10px;width:500px;height:260px;background-image:url(http://www.decocode.de/img/eaglefairy.jpg);'></div>

Dieser Code führt zu folgender Darstellung:

Fixierung – `background-attachment`

W3C Standard

Über die Eigenschaft background-attachment lässt sich einstellen, ob ein Hintergrundbild beim Scrollen einer Seite stehen bleibt oder mitscrollt. Die Eigenschaft erwartet einen der folgenden Werte:

• scroll – Hintergrundbild scrollt mit dem Element
• fixed – Hintergrundbild bleibt stehen

Man beachte, dass die Position eines fixierten Hintergrundbildes nicht von den Außenkanten des Elements berechnet wird, sondern von den Außenkanten des Browserfensters.

Hier ein paar Beispiele:

Code kopieren

<p style='background-attachment:scroll;background-position:top center;background-repeat:repeat-y;background-image:url("img/eaglefairy.jpg");'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background-attachment:fixed;background-position:top center;background-repeat:repeat-y;background-image:url("img/eaglefairy.jpg");'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

Hintergrund – `background`

W3C Standard

Mit der Eigenschaft background lassen sich alle fünf (oder auch nur ein Teil davon) der oben beschriebenen Eigenschaften zusammengefasst notieren.

Die Reihenfolge ist hierbei prinzipiell beliebig, jedoch sollte man bei der Positionsangabe den horizontalen Wert zuerst notieren.

Hier ein paar Beispiele:

Code kopieren

<p style='background:green;'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background:url("img/background1.png") repeat-x #444;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background:url("img/eaglefairy.jpg") center repeat-y fixed;'>Consetetur sadipscing elitr. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>
<p style='background:10px top no-repeat url("img/eaglefairy.jpg") scroll #777;'>Sed diam nonumy eirmod tempor. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur.</p>
<p style='background:url("img/background2.jpg");'>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</p>

Dieser Code führt zu folgender Darstellung:

CSS: Hintergrund

Hintergrundfarbe – background-color

Hintergrundbild – background-image

Wiederholung – background-repeat

Hintergrundposition – background-position

Hintergrundgröße – background-size

Hintergrundursprung – background-origin

Hintergrundausschnitt – background-clip

Fixierung – background-attachment

Hintergrund – background

Hintergrundfarbe – `background-color`

Hintergrundbild – `background-image`

Wiederholung – `background-repeat`

Hintergrundposition – `background-position`

Hintergrundgröße – `background-size`

Hintergrundursprung – `background-origin`

Hintergrundausschnitt – `background-clip`

Fixierung – `background-attachment`

Hintergrund – `background`