background-image

Hinweis: Text und andere Inhalte können auf Hintergrundbildern liegen. Wir können mit ergänzenden Eigenschaften Größe und Position sowie andere Aspekte beeinflussen.

CSS Hintergrund-Bilder

CSSWerteBedeutung
background:#000 url("*.*") no-repeat fixed center;Praktische Kurzschreibweise der Eigenschaften background -color, -image, -position, -size, -repeat, -origin, -clip, -attachment
background-color:#fff;Farbe des Hintergrundes mittels der CSS üblichen Farbwerte.
background-image:url("bild.jpg");Pfadangabe des Hintergrundbildes
background-position:left, top, right, center (...), 20% 30%, 50px 200px;Position im Element
background-size:auto, 50px, 50%, cover, contain;Größe des Hintergrund unverändert (auto), in Pixel oder Prozent. Cover füllt die Box aus wobei Bereiche nicht sichtbar werden, contain füllt den Bereich aus wobei alle Bereiche sichtbar bleiben.
background-repeat:repeat, repeat-x, repeat-y; no-repeat;Der Hintergrund wiederholt sich horizontal und vertikal, nur auf der X- oder Y-Achse oder überhaupt nicht.
background-origin:border-box, padding-box, content-box;Der Ursprung des Hintergrundbildes kann entsprechend des allgemeinen Box Modells an der Box des Rahmens, des Paddings oder des Inhalts festgelegt werden.
background-clip:border-box, padding-box, content-box;Hintergrundbild kann entsprechend des allgemeinen Box Modells an der Box des Rahmens, des Paddings oder des Inhalts abgeschnitten werden.
background-attachment:fixed, scroll;Hintergrundbild scrollt mit oder ist fixiert. Scroll ist Standard.

multiple background-images

Hinweis: Über die Kurzschreibweise background: können wir einem Element auch mehrere Hintergrundbilder zuweisen. Diese werden dann mit einem Komma getrennt. Background: fasst dabei mehrere Eigenschaften zusammen. Die Reihenfolge ist vorgegeben.

CSS Hintergrund-Bilder

CSSWerteBedeutung
background:#000 url("*.*") no-repeat fixed center;Praktische Kurzschreibweise der Eigenschaften background -color, -image, -position, -size, -repeat, -origin, -clip, -attachment
background-color:#fff;Farbe des Hintergrundes mittels der CSS üblichen Farbwerte.
background-image:url("bild.jpg");Pfadangabe des Hintergrundbildes
background-position:left, top, right, center (...), 20% 30%, 50px 200px;Position im Element
background-size:auto, 50px, 50%, cover, contain;Größe des Hintergrund unverändert (auto), in Pixel oder Prozent. Cover füllt die Box aus wobei Bereiche nicht sichtbar werden, contain füllt den Bereich aus wobei alle Bereiche sichtbar bleiben.
background-repeat:repeat, repeat-x, repeat-y; no-repeat;Der Hintergrund wiederholt sich horizontal und vertikal, nur auf der X- oder Y-Achse oder überhaupt nicht.
background-origin:border-box, padding-box, content-box;Der Ursprung des Hintergrundbildes kann entsprechend des allgemeinen Box Modells an der Box des Rahmens, des Paddings oder des Inhalts festgelegt werden.
background-clip:border-box, padding-box, content-box;Hintergrundbild kann entsprechend des allgemeinen Box Modells an der Box des Rahmens, des Paddings oder des Inhalts abgeschnitten werden.
background-attachment:fixed, scroll;Hintergrundbild scrollt mit oder ist fixiert. Scroll ist Standard.

► Weitere Infos

Externe Quellen

Kompatibilität

http://caniuse.com/#feat=background-img-opts

Die Unterstützung für die Eigenschaften rund um background-images durch die heute gängigen Browser ist sehr gut.


CSS Backgrounds and Borders Module Level 3

3.1. Layering Multiple Background Images

Original Spezifikation der W3C für Border-Images in englischer Sprache.


Hintergründe auf selfhtml.wiki

http://wiki.selfhtml.org(...)Hintergrundfarben_und_-bilder

Umfangreiche Erklärung in deutscher Sprache.


Perfect Full Page Background Image

https://css-tricks.com/(...)full-page-background-image

Tutorial für vollflächige Hintergrundbilder in englischer Sprache.


Kostenlose Hintergründe

http://subtlepatterns.com

Ressource für kostenlose Hintergrund-Texturen in englischer Sprache.