CSS Hintergrundbilder

Der Hintergrund eines Elements kann als Farbe, als Hintergrundbild oder als Kombination aus beidem festgelegt werden. Mit CSS lassen sich Hintergrundbilder horizontal und vertikal wiederholen oder einzeln platzieren. Hintergründe werden nicht vererbt.

Eigenschaften

  • background-image:url(bild.gif)
  • background-repeat:repeat | no-repeat | repeat-x | repeat-y;
  • background-position:left top | center | 20px 50%;
  • background-attachment:scroll | fixed | local;
  • background-size:auto | 100% 100% | cover | contain;

background-image

Mit background-image wird ein Bild als Hintergrund eines Elements definiert. Ohne weitere Angaben wird das Bild in seiner Originalgrösse dargestellt und automatisch wiederholt.

  • url()Verweist auf die Bilddatei, die als Hintergrund verwendet wird.
  • noneEntfernt ein vorhandenes Hintergrundbild.

Originalgrösse und automatische Wiederholung

1
.bild1{background-image:url(bild.gif); }

background-repeat

background-repeat steuert, ob und wie ein Hintergrundbild horizontal und/oder vertikal wiederholt wird. Standardmässig wird ein Hintergrundbild in beide Richtungen gekachelt.

  • repeatWiederholt das Bild horizontal und vertikal.
  • no-repeatAls einzelner Wert zeigt es das Bild nur einmal an.
  • repeat-xWiederholt das Bild horizontal.
  • repeat-yWiederholt das Bild vertikal.
  • spaceVerteilt vollständig sichtbare Wiederholungen mit gleichmässigen Abständen.
  • roundSkaliert die Wiederholungen so, dass sie ohne Anschnitt in die Fläche passen.

Zwei Werte

Bei zwei Werten steuert der erste die horizontale und der zweite die vertikale Wiederholung.

background-repeat: repeat no-repeat; /* entspricht repeat-x */
background-repeat: no-repeat repeat; /* entspricht repeat-y */
background-repeat: space no-repeat;  /* horizontal space, vertikal keine Wiederholung */
background-repeat: round no-repeat;  /* horizontal round, vertikal keine Wiederholung */

Horizontal wiederholen mit repeat-x

2
.bild2 {
background-image:url(bild.gif); 
background-repeat:repeat-x;}

Vertikal wiederholen mit repeat-y

3
.bild3 {
background-image:url(bild.gif); 
background-repeat:repeat-y;}

Gleichmässige Abstände mit space

space
.bild-space {
    background-image: url(bild.gif);
    background-repeat: space no-repeat;
}

Passend skalieren mit round

round
.bild-round {
    background-image: url(bild.gif);
    background-repeat: round no-repeat;
}

background-position

background-position bestimmt die Position eines Hintergrundbildes innerhalb eines Elements. Die Werte beziehen sich auf die Fläche des Elements.

  • left | center | rightPositioniert das Bild horizontal.
  • top | center | bottomPositioniert das Bild vertikal.
  • px | remPositioniert das Bild mit einem festen Abstand.
  • %Positioniert das Bild proportional zur verfügbaren Fläche.

Zwei Werte

Bei zwei Werten beschreibt der erste die horizontale und der zweite die vertikale Position. Wird nur ein Wert angegeben, setzt der Browser den zweiten automatisch auf center.

background-position: left bottom;
background-position: right; /* entspricht: right center */
background-position: 20px 50%;
background-position: 10% 80%;

In der Mitte positionieren

.bild4 {
 background: url(bild.gif) no-repeat center center;
}

Mit Prozent- und Pixelwerten positionieren

.bild5 {
 background: yellow url(bild.gif) no-repeat 85% 20px ;
}

Prozentwerte

Bei Prozentwerten berücksichtigt der Browser die Breite des Elements und des Hintergrundbildes.

Position = (Elementbreite − Bildbreite) × Prozentwert
  • 0% – Bild und Element sind links ausgerichtet.
  • 50% – Bild und Element sind zentriert.
  • 100% – Bild und Element sind rechts ausgerichtet.

Mehrere Hintergrundbilder

Mehrere Hintergrundbilder werden als kommagetrennte Ebenen angegeben. Das zuerst genannte Bild liegt zuoberst, jedes weitere eine Ebene darunter. Für jede Ebene lassen sich Position, Wiederholung und Grösse separat festlegen. Die Hintergrundfarbe liegt unter allen Bildern.

Fünf Hintergrundbilder

.multi-bgs {
    background:
        url(dots/1.png) no-repeat left top,
        url(dots/2.png) no-repeat left bottom,
        url(dots/3.png) no-repeat center center,
        url(dots/4.png) no-repeat right top,
        url(dots/5.png) no-repeat right bottom;
    background-color: indigo;
}

background-attachment

background-attachment bestimmt, wie sich ein Hintergrundbild beim Scrollen verhält: Es bewegt sich mit der Seite, scrollt mit dem Inhalt eines Elements oder bleibt am Viewport fixiert.

  • scroll Standardverhalten – das Hintergrundbild ist an das Element gebunden und scrollt mit ihm, wenn die Seite gescrollt wird. Innerhalb eines scrollbaren Elements bleibt es stehen.
  • fixed Das Hintergrundbild ist am Viewport fixiert und bleibt beim Scrollen der Seite an derselben Position. Wird häufig für einfache Parallax-Hintergründe genutzt.
  • local Das Hintergrundbild ist an den scrollbaren Inhalt des Elements gebunden. Es bewegt sich nur, wenn das Element selbst scrollbar ist (z. B. bei overflow: auto).

Am Viewport fixiert

Nurse Das Beispiel ist im Hintergrund der gesamten Seite sichtbar. Scrolle die Seite und beobachte, wie das Bild am Viewport fixiert bleibt.

body {
    background: url(bild.gif) no-repeat fixed right center;
}

background-size

Mit background-size wird festgelegt, wie gross ein Hintergrundbild innerhalb eines Elements dargestellt wird. Die Eigenschaft verändert die Grösse des Bildes, nicht die Grösse des Elements.

  • autoVerwendet die ursprünglichen Bildproportionen.
  • 200px autoLegt die Breite fest und berechnet die Höhe automatisch.
  • 100% 100%Passt Breite und Höhe an das Element an. Das Bild kann dabei verzerrt werden.
  • coverFüllt das Element vollständig aus. Teile des Bildes können abgeschnitten werden.
  • containZeigt das Bild vollständig. Dabei können freie Flächen entstehen.

Zwei Werte

Bei zwei Werten bestimmt der erste die Breite und der zweite die Höhe des Hintergrundbildes. Wird nur ein Wert angegeben, setzt der Browser den zweiten automatisch auf auto.

background-size: 200px auto;
background-size: 100% 100%;

Breite und Höhe in Prozent

background: url(bild.gif) no-repeat bottom left;
background-size: 100% 100%;

Feste Höhe

background: lavender url(bild.gif) no-repeat center;
background-size: auto 100px;

cover

background: url(bild.gif) no-repeat top left / cover;

contain

background: url(bild.gif) no-repeat center / contain;

Hintergrundbilder bestimmen die Elementgrösse nicht

Ein Hintergrundbild trägt nichts zur Grösse eines Elements bei. Anders als bei einem <img> beeinflusst seine intrinsische Bildgrösse die Grösse des Elements nicht. Ein leeres Element benötigt deshalb eine grössenbestimmende CSS-Angabe wie height, min-height, aspect-ratio oder padding. 

.box {
    aspect-ratio: 1 / 1;
    background: url(bild.jpg) center / cover;
}

aspect-ratio gibt der leeren Box überhaupt erst eine Höhe (abhängig von ihrer Breite), background-size: cover sorgt danach dafür, dass das Bild diese Box sauber ausfüllt. Zwei unterschiedliche Aufgaben, die zusammenspielen – nicht ein Ersatz für den anderen.

Kurzschreibweise background

Mit background lassen sich mehrere Hintergrund-Eigenschaften zusammenfassen.

background: #ccc url(blumen.gif) no-repeat fixed right bottom;

background: #ccc url(blumen.gif) no-repeat fixed right bottom / cover;

Eine gut lesbare Reihenfolge ist: Farbe → Bild → Repeat → Attachment → Position / Size. Wird background-size angegeben, folgt der Wert nach der Position und wird mit einem Schrägstrich / abgetrennt.

Kurz gesagt

  • background-repeat: Bei zwei Werten gilt der erste horizontal und der zweite vertikal.
  • background-position: Der erste Wert gilt horizontal, der zweite vertikal.
  • Bei mehreren Hintergrundbildern liegt das zuerst genannte Bild zuoberst.
  • background-attachment steuert das Verhalten des Bildes beim Scrollen.
  • background-size bestimmt die Grösse des Bildes, nicht des Elements.
  • In der Kurzschreibweise wird background-size mit / von background-position getrennt.