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.

Smalltalk-Ecke

Hat Dir der Artikel gefallen oder möchtest Du am Inhalt etwas ergänzen? Hast Du weitere Fragen dazu? Lass uns gerne dazu austauschen. Ich freue mich von Dir zu hören! :)


Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Werde Teil unserer Community

Abonniere unseren kostenlosen Newsletter und wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, die Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.
Kostenloser Newsletter

Bleibe auf dem Laufenden!

Wir informieren Dich regelmäßig über neue, spannende Artikel im Bereich Webentwicklung, Programmierung von Mobile Apps, SEO und mehr!

Wir halten deine Daten privat und teilen sie nur mit Dritten, die diesen Dienst ermöglichen. Lies unsere Datenschutzerklärung.