CSS/Tutorials/Hintergrund/background
Die Eigenschaft background ist für jedes der Hintergrundbilder eine Zusammenfassung der möglichen Einzelangaben zu
-
background-color
-
background-image
-
background-blend-mode
-
background-origin
-
background-position
-
background-repeat
-
background-size
-
background-attachment
-
background-clip
- Eine Angabe zu
background-size
muss nach der Angabe zubackground-position
erfolgen und wird von dieser durch einen Slash (/
) getrennt. - Die Werte für
background-clip
undbackground-origin
bezeichnen beide den Anzeigebereich des Hintergrundbildes, sind also nicht unterscheidbar. Deshalb gilt:- ein gesetzter Wert gilt für beide Eigenschaften gleichermaßen
- bei zwei Werten bezeichnet der erste den Wert für
background-clip
, der zweite spezifiziertbackground-origin
- Nur der zuletzt angegebene Hintergrund darf eine Hintergrundfarbe erhalten, siehe auch Verwenden mehrerer Hintergrundbilder
- Nicht angegebene Eigenschaften werden mit ihren Ausgangswerten initialisiert.
Alle Angaben sind optional. Die Reihenfolge ist bis auf die genannten Einschränkungen beliebig. Die Werte für die einzelnen Hintergrundgrafiken werden durch Kommata getrennt.
Inhaltsverzeichnis
background-color[Bearbeiten]
Mit der Eigenschaft background-color kann einem Element eine Hintergrundfarbe zugewiesen werden.
Erlaubt sind dabei folgende Werte:
- eine Farbangabe
- die Angabe
transparent
, (Ausgangswert) - die Angabe
currentColor
, weist den Browser an, den berechneten Wert der Textfarbe des Elements zu verwenden - die Angabe
inherit
, weist den Browser an, die Hintergrundfarbe des Elternelementes zu verwenden
body {
background-color: DeepSkyBlue;
color: midnightblue;
}
p {
background-color: #222;
color: #bbb;
}
In diesem Beispiel erhält der body
einen hellblauen Hintergrund, während der Textabsatz dunkelgrau eingefärbt wird.
Für das code-Element hingegen ist keine Hintergrundfarbe festgelegt. Deshalb bekommt es die Voreinstellung, einen transparenten Hintergrund, sodass die Farbe des Elternelements p
sichtbar bleibt.
Die Farbangabe kann wie im oberen Regelsatz aus Farbnamen, aber auch wie im unteren Regelsatz aus Hex-Werten, rgba- oder hsl-Werten bestehen.
Transparenter Hintergund mit rgba[Bearbeiten]
Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.
.o0 { background-color: rgba(255, 255, 255, 0); }
.o2 { background-color: rgba(255, 255, 255, .2); }
.o4 { background-color: rgba(255, 255, 255, .4); }
.o6 { background-color: rgba(255, 255, 255, .6); }
.o8 { background-color: rgba(255, 255, 255, .8); }
.o10 { background-color: rgba(255, 255, 255, 1); }
Das Beispiel entspricht weitgehend dem oberen. Die Transparenz beschränkt sich aber auf den Hintergrund, der mit background-color und dem entsprechenden rgba-Wert eingefärbt wird.
background-image[Bearbeiten]
Mit der Eigenschaft background-image legen Sie den Pfad zu den Hintergrundbildern für ein Element fest.
background-image
erwartet die Pfade zu den Hintergrundgrafiken in der Schreibweise url(Pfadangabe), url(Pfadangabe)
. Die Pfadangabe kann dabei relativ oder absolut erfolgen (siehe HTML/Regeln/Referenzieren in HTML).
#demo {
background-image:
url(...),
url(...);
height: 20em;
outline: 1px solid;
width: 30em;
}
In diesem Beispiel werden zwei Hintergrundgrafiken übereinander gelegt. Da Angaben zu den weiteren Eigenschaften der Hintergründe fehlen, verwenden die Browser ihre default-Einstellungen.
p {
background-color: black;
background-image: url(...);
color: white;
}
Erlaubt ist zudem der Wert none
, welcher ebenfalls eine Hintergrundebene erzeugt. Dies ist ggf. bei der Festlegung weiterer Eigenschaften multipler Hintergründe zu beachten.
Mit CSS3 gibt es auch die Möglichkeit, Farbverläufe als Hintergründe zu erstellen. Die entsprechenden Funktionen sind
- linear-gradient(), linearer Farbverlauf
- radial-gradient(), radialer (kreisförmiger) Farbverlauf
- conic-gradient(), konischer (gewinkelter) Farbverlauf
background-position[Bearbeiten]
Sie können mithilfe der Eigenschaft background-position bestimmen, an welcher Stelle sich die linken oberen Ecken der Hintergrundbilder befinden sollen. Dies wird beispielsweise angewendet, um durch Spritegrafiken die Ladezeit einer Internetseite zu verringern.
Details: caniuse.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-position</title>
<style>
...
#eins { background-position: center; }
#zwei { background-position: -50px 100px; }
#drei { background-position: right bottom; }
#vier { background-position: left -50px bottom 100px; }
</style>
</head>
<body>
<h1>background-position</h1>
<div id="eins"><span class="caption">center center</span></div>
<div id="zwei"><span class="caption">-50px 100px</span></div>
<div id="drei"><span class="caption">right bottom</span></div>
<div id="vier"><span class="caption">left -50px bottom 100px</span></div>
</body>
</html>
Mit background-position
positionieren Sie das Hintergrundbild innerhalb des Anzeigebereiches (siehe auch background-clip
).
Erlaubt ist dabei ein Paar von Längenangaben. Die erste Längenangabe bezeichnet dabei die Position in x-Richtung, die zweite die in y-Richtung. Auch negative Werte sind möglich. Wird nur eine Längenangabe gemacht, so ist dies die horizontale Position, der fehlende Wert wird mit center
initialisiert. Der Ausgangswert ist 0 0
. Er positioniert die linke obere Ecke des Hintergrundbildes an die linke obere Ecke des Anzeigebereiches.
Erlaubt ist weiterhin ein Paar selbsterklärender Schlüsselwörter:
-
left
,center
,right
, für die horizontale Positionierung -
top
,center
,bottom
, für die vertikale Positionierung
Wird von diesen Schlüsselwörtern nur eines gesetzt, so wird die fehlende Angabe mit center
initialisiert.
Mit CSS3 ist es möglich, Abstände zu den Rändern, sogenannte Offsets anzugeben. Dazu können für eine background-position
-Angabe 2 Werte gesetzt werden. Eine davon muss eines der Schlüsselwörter sein. Positive Werte spezifizieren einen Abstand nach innen, negative nach außen.
#mein_element {background-position: 20px 40px;}
/* Die linke obere Ecke des Hintergrundbildes
befindet sich 20 Pixel vom linken Rand und 40 Pixel vom oberen Rand. */
#mein_element {background-position: right 20px bottom 40px;}
/* Die rechte untere Ecke des Hintergrundbildes
befindet sich 20 Pixel vom rechten Rand und 40 Pixel vom unteren Rand. */
Weiterhin sind Prozentangaben erlaubt. Sie beziehen sich dabei stets auf die Differenz der Abmessungen von Anzeigebereich des Hintergrundbildes und Hintergrundbild selbst. Eine positive Angabe referenziert einen Punkt innerhalb der Anzeigebereiches, eine negative entsprechend außerhalb.
#mein_element {
background-position: 20% 60%;
}
- Es wird der Punkt des Anzeigebereiches bestimmt, der 20% von seinem linken und 60% von seinem oberen Rand entfernt ist.
- Es wird der Punkt der Hintergrundgrafik bestimmt, der 20% von ihrem linken und 60% von ihrem oberen Rand entfernt ist.
- Es wird so gerendert, dass diese beiden Punkte übereinander liegen.

background-origin[Bearbeiten]
Standardmäßig werden Hintergrundgrafiken im oberen linken Bereich eines Elementes angezeigt, bzw. von dort aus gekachelt. Der exakte Ursprung (engl. origin) bzw. Ausgangspunkt für die Positionierung ist die linke, obere Ecke innerhalb des Rahmens.
Mit der Eigenschaft background-origin können Sie dieses Verhalten beeinflussen, indem Sie den Bereich angeben, an dessen Rändern Sie die Grafiken ausrichten möchten.[1]
Details: caniuse.com
Folgende Möglichkeiten stehen Ihnen zur Verfügung:
-
border-box
– Ausrichtung an der Außenkante des Rahmens -
padding-box
– Ausrichtung an der Außenkante des Innabstandes (Voreinstellung) -
content-box
– Ausrichtung an der Außenkante des Bereiches für den Elementinhalt
Der folgende Code richtet eine Hintergrundgrafik unten rechts im Inhaltsbereich eines Artikel-Elementes aus.
article { background-origin: content-box; background-position: right bottom; }
Das funktioniert auch für mehrere Hintergrundgrafiken. Dann sind mehrere Werte kommagetrennt anzugeben. Im Zusammenspiel mit background-clip
ergeben sich vielfältige Gestaltungsmöglichkeiten.
Alle Kombinationsmöglichkeiten von background-origin
und background-clip
[Bearbeiten]
Besonders interessant und vielfältig sind die Einflussmöglichkeiten auf Hintergrundgrafiken, wenn Sie für background-origin
und background-clip
gezielt eigene Angaben machen.
background-clip
und background-origin
. Die div
-Elemente haben alle eine dünne Außenlinie, einen breiten teiltransparenten Rahmen sowie einen breiten Innenabstand.background
) einen Wert angeben, setzen Sie diesen automatisch für background-origin
und background-clip
.background-origin
wird nicht beachtet, wenn background-attachment:fixed
gesetzt ist.background-repeat[Bearbeiten]
Über die Eigenschaft background-repeat können Sie bestimmen, wie mit Hintergrundbildern verfahren werden soll, falls das Element größer als ein Hintergrundbild ist.
Erlaubt sind dabei folgende Angaben:
-
repeat
, Voreinstellung, das Hintergrundbild wird in x- und y-Richtung wiederholt -
repeat-x
, das Hintergrundbild wird nur horizontal wiederholt -
repeat-y
, das Hintergrundbild wird nur vertikal wiederholt -
no-repeat
, keine Wiederholung des Hintergrundbildes
div {
background-image: url("https://wiki.selfhtml.org/mediawiki/images/8/87/Selfhtml-logo.gif");
height: 109px;
margin: 1em;
outline: 1px solid;
padding: 0;
width: 30em;
}
div code { background-color: white; }
#one { background-repeat: repeat; }
#two { background-repeat: space; }
#three { background-repeat: round; }
#four { background-repeat: no-repeat;
}
Mit CSS3 wurden die Möglichkeiten von background-repeat
erweitert. Erlaubt ist jetzt ein Paar folgender Angaben, wobei der erste Wert die Wiederholung in x-Richtung und der zweite die in y-Richtung bestimmt. Ist nur ein Wert angegeben, so gilt er für beide Richtungen.
-
repeat
, Wiederholung des Hintergrundbildes -
space
, es werden soviele Hintergrundbilder wiederholt, wie in der entsprechenden Richtung in das Element hineinpassen ohne das Bild zu beschneiden, ggf. werden die Abstände zwischen den Wiederholungen vergrößert -
round
, ebenso, ggf. wird das Hintergrundbild skaliert -
no-repeat
, keine Wiederholung
Die Angaben {background-repeat: repeat-x;}
und {background-repeat: repeat-y;}
sind ebenfalls gültig und gleichbedeutend mit {background-repeat: repeat no-repeat;}
bzw. {background-repeat: no-repeat repeat;}
.
background-size[Bearbeiten]
Sie können jedes der Hintergrundbilder mithilfe der Eigenschaft background-size skalieren.
Erlaubt sind dabei die Schlüsselwörter:
-
auto
, Voreinstellung übernimmt die Maße der Grafik, keine Skalierung -
contain
, passt unter Beibehaltung des Seitenverhältnisses die größere Seite der Grafik in den Anzeigebereich ein -
cover
, passt unter Beibehaltung des Seitenverhältnisses die kleinere Seite der Grafik in den Anzeigebereich ein, ergibt eine vollständige Füllung des Anzeigebereiches - ein Paar Längenangaben
Die erste Angabe spezifiziert die gewünschte Breite der Hintergrundgrafik, die zweite entsprechend die Höhe. Ist nur ein Wert gegeben, so wird die Höhe unter Beibehaltung des Seitenverhältnisses skaliert.
#eins { background-size: 50px;}
#zwei { background-size: auto 100px;}
#drei { background-size: 50%; }
#vier { background-size: 50% 100%; }
#fuenf { background-size: contain; }
#sechs { background-size: cover; }
{ background-size: 100px; }
{ background-size: 100px auto; } /* sind identische Angaben */
Soll nur die Höhe festgelegt werden, so kann dies mit background-size: auto 100px;
geschehen. Prozentangaben sind im Gegensatz zu negativen Werten ebenfalls erlaubt. Sie beziehen sich auf die entsprechenden Angaben des Anzeigebereichs.
background-attachment[Bearbeiten]
Sie können mithilfe der Eigenschaft background-attachment bestimmen, wie sich die Hintergrundbilder verhalten sollen, wenn das Element oder sein Inhalt bewegt wird.
Details: caniuse.com
Erlaubt sind dabei die Angaben
-
fixed
- das Hintergrundbild ist am Viewport ausgerichtet, Angaben zur Positionierung beziehen sich auf den Viewport (!)
- beim Bewegen des Elements wird immer ein anderer Bereich des Hintergrundes sichtbar
- beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert
- vergleichbar mit
position: fixed;
-
scroll
- Standardwert
- das Hintergrundbild ist an der Elementbox ausgerichtet, Angaben zur Positionierung beziehen sich auf diese
- beim Bewegen des Elements bleibt der Hintergrund unverändert, das heißt, er scrollt mit dem Element mit
- beim Bewegen des Elementinhalts bleibt der Hintergrund unverändert
- vergleichbar mit
position: absolute;
Die Umsetzung der CSS3-Spezifikation durch die Browser erlaubt es nun auch, das Verhalten des Hintergrundbildes beim Bewegen des Elementinhaltes zu bestimmen. Ein gültiger Wert ist:
-
local
- das Hintergrundbild ist an der Elementbox ausgerichtet, Angaben zur Positionierung beziehen sich auf diese
- beim Bewegen des Elements bleibt der Hintergrund unverändert
- beim Bewegen des Elementinhalts bewegt sich der Hintergrund mit
- vergleichbar mit
position: relative;
p {
outline: 1px solid;
overflow: auto;
width: 167px;
height: 300px;
background-image: url("Sonnenuntergang.jpg");
background-repeat: no-repeat;
}
#one { background-attachment: fixed; }
#two { background-attachment: scroll; }
#three { background-attachment: local; }
background-blend-mode[Bearbeiten]
Mit der background-blend-mode-Eigenschaft können Sie festlegen, wie sich die Hintergrundbilder eines Elements, sowie dessen Hintergrundfarbe, miteinander vermischen.
Details: caniuse.com
Information
div {
width: 250px;
height: 250px;
margin: 0 3em;
background-image: url("Selflogo.png"), url("Rainbow.jpg");
background-repeat: no-repeat, no-repeat;
background-position: center, center;
box-shadow: 5px 5px 5px 0 #aaaaaa;
background-blend-mode: normal;
}
Blend-Modi[Bearbeiten]
Die (Anzahl der) Werte der Blend-Modi sollten zu den in der background-image-Eigenschaft definierten Bildern passen. Stimmt die Anzahl nicht überein, werden sie wiederholt oder abgeschnitten, bis jedem Hintergrundbild ein Blend-Modus zugeordnet werden kann.
Ein Blend-Modus ist eine Rechenmethode um den endgültigen Farbwert eines Pixels zu berechnen, wenn sich verschiedene Ebenen überlappen. Jeder Blendmodus verwendet für jeden einzelnen Bildpunkt die Farbwerte von Vorder- und Hintergrund, berechnet die Vermischung und gibt einen Farbwert zurück. Die endgültige, sichtbare Darstellung ist das Ergebnis der Berechnung aller übereinanderliegenden Pixel der vermischten Ebenen.
<h1>Demonstration von Blendmodi</h1>
Die Erläuterungen gehen von einer Hintergrundfarbe und einer Vordergrundfarbe aus.
Folgende Werte sind möglich:
-
normal
: keine Vermischung, der Farbwert ist der des Vordergrundes, Standardwert -
multiply
: die Farbwerte werden multipliziert, das Ergebnis ist nicht heller als die Ausgangsfarben -
screen
: die Farbwerte der Komplementärfarben werden multipliziert, das Ergebnis ist nicht dunkler als die Ausgangsfarben -
overlay
:multiply
oderscreen
, abhängig von der Hintergrundfarbe -
darken
: die dunklere der beiden Farben -
lighten
: die hellere der beiden Farben -
color-dodge
: hellt die Hintergrundfarbe auf -
color-burn
: dunkelt die Hintergrundfarbe ab -
hard-light
:multiply
oderscreen
, abhängig von der Vordergrundfarbe -
soft-light
:darken
oderlighten
, abhängig von den Farbwerten -
difference
: die dunklere Farbe wird von der helleren subtrahiert -
exclusion
: ähnlich wiedifference
-
hue
: erzeugt eine Farbe mit dem Farbton der Vordergrundfarbe und der Sättigung und Helligkeit der Hintergrundfarbe -
saturation
: erzeugt eine Farbe mit der Sättigung der Vordergrundfarbe und dem Farbton und der Helligkeit der Hintergrundfarbe -
color
: erzeugt eine Farbe mit dem Farbton und der Sättigung der Vordergrundfarbe und der Leuchtkraft der Hintergrundfarbe -
luminosity
: erzeugt eine Farbe mit der Leuchtkraft der Vordergrundfarbe und dem Farbton und der Sättigung der Hintergrundfarbe
hue
, saturation
, color
und luminosity
nicht.
- Screenshots der Ergebnisse
Vertauscht man die Reihenfolge der Bilder, ändern sich auch einige Ergebnisse. So liefert bei vertauschten Grafiken etwa overlay
dasselbe Resultat wie hard-light
, wenn die Grafiken unvertauscht bleiben.
- Screenshots der Ergebnisse
Bildquelle[Bearbeiten]
Fazit
Auch wenn es sicherlich nicht viele praktische Anwendungsmöglichkeiten für diese Eigenschaft gibt, lassen sich so doch spektakuläre Effekte erzielen, für die Sie bis jetzt teure Grafik-Programme benötigten.
Siehe auch
- Webkrauts: Blend-Modes
- Wikipedia: Blend modes (Englisch)
background-clip[Bearbeiten]
Mit der Eigenschaft background-clip können Sie bestimmen, dass die Hintergrundeigenschaften nur für bestimmte Bereiche der Elementbox gelten. [2] [3]
Details: caniuse.com
Erlaubt sind dabei die folgenden Angaben:
-
border-box
, (Standardwert) Hintergrund wird im Inhalts- und padding-Bereich sowie unter den Rahmen dargestellt, -
content-box
, Hintergrund wird nur im Inhaltsbereich dargestellt -
padding-box
, Hintergrund wird im Inhalts- und padding-Bereich dargestellt
Für ein tieferes Verständnis wird das Studium des Artikels zum Box-Modell empfohlen.
div {
width: 20em;
margin: 1em;
outline: 1px solid black;
border: 1em dashed red;
padding: 1em;
background-color: gold;
}
#one { background-clip: border-box; }
#two { background-clip: padding-box; }
#three { background-clip: content-box; }
In diesem Beispiel erhalten die Div-Elemente alle eine dünne schwarze Außenlinie, einen breiten gestrichelten Rahmen sowie einen goldfarbenen Hintergrund, um die verschiedenen Werte für background-clip
veranschaulichen zu können.
- ↑ W3C: background-origin
- ↑ W3C: background-clip property
- ↑ css-tricks.com: The `background-clip` Property and its Use Cases