Bitte warten...

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.

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.

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:

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.

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.

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.

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>

Dieser Code führt zu folgender Darstellung (Hintergrundbild © NASA und ESA):

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.

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.

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:

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.

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.

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.