Hintergrundbilder mit CSS skalieren

Bei vielen modernen Websites sieht man Hintergrundbilder, die sich dem Browser automatisch anpassen. Das zu realisieren ist (dank CSS3) sehr simpel.

Hintergrundbilder mit CSS skalieren

Damit unser Hintergrundbild sich der Größe des Browsers anpasst benötigen wir background-size. Der Code dafür könnte so aussehen:

html {
     background:url(Bilder/hintergrund.jpg) 0 0 no-repeat fixed;
     background-size:cover;
     -moz-background-size:cover;
     -webkit-background-size:cover;
}

Nun skaliert der Browser das Hintergrundbild und passt sich der Browsergröße an. Außerdem haben wir dem Hintergrundbild position:fixed mitgegeben, damit es seine Position behält und beim eventuellen Scrollen der Seite nicht mitscrollt.

Das war´s auch schon!

Browserkompabilität

Die Methode funktioniert in allen modernen Browsern. Getestet wurde sie im Firefox 15, Chrome 22, Opera 12 und Internet Explorer 9.