CSS/Tutorials/Hintergrund/background

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
← CSS Sprites
Gestaltung von Hintergründen
(Übersicht)
Verläufe
mit linear-gradient() →

Die Eigenschaft background ist für jedes der Hintergrundbilder eine Zusammenfassung der möglichen Einzelangaben zu

Beachten Sie:
  • Eine Angabe zu background-size muss nach der Angabe zu background-position erfolgen und wird von dieser durch einen Slash (/) getrennt.
  • Die Werte für background-clip und background-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 spezifiziert background-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.

background-color[Bearbeiten]

Mit der Eigenschaft background-color kann einem Element eine Hintergrundfarbe zugewiesen werden.

  • CSS 1.0
  • Chrome
  • Firefox
  • IE
  • Opera
  • Safari

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


Hintergrundfarbe ansehen …
body   { 
	background-color: DeepSkyBlue; 
	color: midnightblue;
}
p    { 
	background-color: #222;
	color: #bbb;
}
ansehen …

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.

Hauptartikel: CSS/Wertetypen/Farbangaben
Empfehlung: Verwenden Sie stets möglichst kontrastreiche Kombinationen aus Vorder- und Hintergrundfarben, um sehbehinderten Menschen den Zugang zu Ihren Inhalten nicht zu erschweren. Der Color Contrast Checker von WebAIM kann Ihnen im Vorfeld bei der Farbwahl behilflich sein.
Hauptartikel: Grafik/Farbkonzept/Farben und Kontraste

Transparenter Hintergrund mit rgba[Bearbeiten]

Wenn Sie nur den Hintergrund und nicht den Textinhalt durchscheinend darstellen wollen, verwenden Sie rgba-Farbangaben bei der Hintergrundfarbe.

durchscheinender Hintergrund ansehen …
.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.

ansehen …


Empfehlung: Mit CSS-Variablen können Sie passende Farbangaben im Kopf Ihres Stylesheets definieren und dann bequem referenzieren:

background-image[Bearbeiten]

Mit der Eigenschaft background-image legen Sie den Pfad zu den Hintergrundbildern für ein Element fest.

  • CSS 2.1
  • IE
  • Firefox
  • Safari
  • Opera
  • Chrome

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).

Beachten Sie: Relative Angaben beziehen sich ggf. auf die CSS-Ressource, nicht auf das HTML-Dokument.
Beispiel ansehen …
      #demo {
        background-image:
          url(...),
          url(...);
        height: 20em;
        outline: 1px solid;
        width: 30em;
      }
ansehen …

In diesem Beispiel werden zwei Hintergrundgrafiken übereinander gelegt. Da Angaben zu den weiteren Eigenschaften der Hintergründe fehlen, verwenden die Browser ihre default-Einstellungen.

Empfehlung: Geben Sie neben dem Hintergrundbild auch immer eine passende Hintergrundfarbe an. Wenn das Bild nicht angezeigt wird, z.B. weil Benutzer eine kontrastreiche Ansicht in ihrem Browser eingestellt haben, ist so der Text trotzdem noch sichtbar.
Beispiel 
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

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.

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Details: caniuse.com

Beispiel ansehen …
<!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>
ansehen …

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.

Beispiel 
#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.

Background-position1.png

Beispiel 
#mein_element {
  background-position: 20% 60%;
}
  1. Es wird der Punkt des Anzeigebereiches bestimmt, der 20% von seinem linken und 60% von seinem oberen Rand entfernt ist.
  2. Es wird der Punkt der Hintergrundgrafik bestimmt, der 20% von ihrem linken und 60% von ihrem oberen Rand entfernt ist.
  3. Es wird so gerendert, dass diese beiden Punkte übereinander liegen.
Background-position2.png

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]

  • CSS 3.0
  • IE 9
  • Firefox
  • Safari
  • Chrome
  • Opera

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.

Darstellung des CSS Box-Modells

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.

Beispiel ansehen …
Dieses Beispiel zeigt alle Kombinationen von background-clip und background-origin. Die div-Elemente haben alle eine dünne Außenlinie, einen breiten teiltransparenten Rahmen sowie einen breiten Innenabstand.
ansehen …
Beachten Sie: Wenn Sie in der Kurzschreibweise für Hintergründe (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.

  • CSS 3.0
  • IE
  • Firefox
  • Safari
  • Opera
  • Chrome

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


Beispiel ansehen …
      
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; 
}
ansehen …

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.

  • CSS 3.0
  • IE 9
  • Firefox
  • Safari
  • Chrome
  • Opera

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.

Beispiel ansehen …
#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; }
ansehen …
Beispiel 
{ 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.

  • CSS 2.1
  • CSS 3.0
  • IE
  • Firefox
  • Safari
  • Chrome
  • Opera

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;
Beispiel ansehen …
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; }
ansehen …

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.

  • Chrome
  • Edge
  • Firefox
  • Opera
  • Safari

Details: caniuse.com

Information

Für die Überblendung mehrerer übereinanderliegender HTML- oder SVG-Elemente gibt es die CSS-Eigenschaft mix-blend-mode.


background-blend-mode ansehen …
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;
}
Das Beispiel erlaubt die verschiedenen Blendmodi auszuprobieren.
ansehen …

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.

Beispiel ansehen …
<h1>Demonstration von Blendmodi</h1>
Das Beispiel erlaubt die verschiedenen Blendmodi interaktiv auszuprobieren.
ansehen …

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 oder screen, 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 oder screen, abhängig von der Vordergrundfarbe
  • soft-light: darken oder lighten, abhängig von den Farbwerten
  • difference: die dunklere Farbe wird von der helleren subtrahiert
  • exclusion: ähnlich wie difference
  • 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
Beachten Sie: Safari unterstützt die Blend-Modi: hue, saturation, color und luminosity nicht.


  • Screenshots der Ergebnisse

  • normal

  • multiply

  • screen

  • overlay

  • darken

  • lighten

  • color-dodge

  • color-burn

  • hard-light

  • soft-light

  • difference

  • exclusion

  • hue

  • saturation

  • color

  • luminosity

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

  • hard-light

  • overlay

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


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]

  • CSS 3.0
  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

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.

Anwendungsbeispiel ansehen …
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; }
ansehen …

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.


← CSS Sprites
Gestaltung von Hintergründen
(Übersicht)
Verläufe
mit linear-gradient() →
  1. ↑ W3C: background-origin
  2. ↑ W3C: background-clip property
  3. ↑ css-tricks.com: The `background-clip` Property and its Use Cases
Abgerufen von „http://wiki.selfhtml.org/index.php?title=CSS/Tutorials/Hintergrund/background&oldid=79750“