CSS Hintergrundbilder

Der Hintergrund eines Elements kann als Farbe oder als Hintergrundbild festgelegt werden. Mit CSS kann man Hintergrundbilder horizontal und vertikal wiederholen, oder einzeln plazieren. 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.

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

Werte: none | url()

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.

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

Werte:no-repeat | repeat | repeat-x | repeat-y

Kurzschreibweise

Unter background können Werte zusammengefasst werden.

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

Reihenfolge (empfohlen): Farbe → Bild → Repeat → Attachment → Position

background-position

Mit background-position wird festgelegt, wo ein Hintergrundbild innerhalb eines Elements positioniert wird. Die Position wird immer relativ zur Fläche des Elements berechnet. 

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

Die Position setzt sich aus zwei Werten zusammen: einem horizontalen und einem vertikalen Wert.

  • horizontal: left | center | right
  • vertikal: top | center | bottom

Reihenfolge: Der erste Wert beschreibt die horizontale Position, der zweite Wert die vertikale Position. Wird nur ein Wert angegeben, wird der zweite automatisch auf center gesetzt. 

background-position: left bottom;
background-position: right; /* entspricht: right center */

Alternativ können auch Pixel oder Prozentwerte verwendet werden:

background-position: 20px 50%;
background-position: 10% 80%;

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.

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

    background-color: indigo;
}

background-attachment

background-attachment bestimmt, wie sich ein Hintergrundbild beim Scrollen verhält und ob es an das Element oder an das Browserfenster gebunden ist.

  • 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). 
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 Grösse des Bildes ist unabhängig von der Grösse des Elements und kann explizit oder automatisch angepasst werden.

 
background: url(bild.gif) no-repeat bottom left;
background-size: 100%  100%;
 
background: lavender url(bild.gif) no-repeat center center;
background-size: auto 100px;
 
background: url(bild.gif) no-repeat top left / cover;
 
background:  url(bild.gif) no-repeat center center / contain;

Die Grösse kann mit zwei Werten angegeben werden:

  • erster Wert: Breite des Hintergrundbildes
  • zweiter Wert: Höhe des Hintergrundbildes

Alternativ stehen spezielle Schlüsselwörter zur Verfügung:

  • cover – das Bild füllt das Element vollständig aus, Teile können abgeschnitten werden
  • contain – das Bild wird vollständig angezeigt, es können freie Flächen entstehen

Kurzschreibweise mit background-size

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

Reihenfolge (empfohlen): Farbe → Bild → Repeat → Position / Size → Attachment

Praxis: leere Elemente brauchen eine eigene Höhe

Leere <div>s mit background-image haben ohne aspect-ratio/height null Höhe. Anders als bei einem <img> (eigene, intrinsische Grösse) trägt das Bild nichts zur Höhe des Elements bei – und ohne Höhe hat background-size: cover nichts zum Skalieren. 

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

Kurz gesagt

  • position: erst horizontal, dann vertikal
  • size: bestimmt die Grösse des Bildes, nicht des Elements
  • background-size kann in der Kurzschreibweise nur mit / angegeben werden.
  • Leere <div>s mit background-image haben ohne aspect-ratio/height null Höhe.