Ein Problem welches sich bei einigen Projekten bislang stellte: skalierende Hintergrundbilder. Also praktisch solche, die sich der Größe des Browserfensters von selbst anpassen und automatisch mit skalieren. Klar: es gibt im Netz unzählige Lösungen mit Javascript. Aber es geht auch wesentlich einfacher. Die Zutaten dafür sind lediglich: ein div-Container, Position-Angaben und Z-index. Das war’s schon! Ganz ohne dirty Tricks und Javascript-Workarounds – und das allerbeste: es funktioniert sogar im IE. Grund genug es mit euch zu teilen…

So wird’s gemacht

Auf der HTML Seite reichen zwei div-Container. Einer enthält die eigentliche Website mit allem Content, der andere das Hintergrundbild welches über einen Image-Tag eingebunden wird. So sieht’s im Code aus:

<div class="content">
    <p>Hier kommt euer Inhalt hin</p>
</div>
<div class="background">
    <img class="scale" src="URL des Hintergrundbildes" alt="" />
</div>

Das nötige CSS sorgt dafür, dass der Background-Container absolut positioniert wird und sich mit 100% der Breite und Höhe des Browserfensters flexibel anpasst. Das darinliegende Image wird anhand dessen automatisch skaliert. Hier das CSS:

.content {
    position: relative;
    width: 760px;
    z-index: 10;
}

.background {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index:2;
}

 .scale {
     width: 100%;
     height: 100%;
}

Damit war’s das schon. Euer Hintergrund dürfte sich nun dem Browserfenster anpassen! Keine weiteren Arbeiten nötig.

Alternative: Nur in Breite oder Höhe skalieren

Möchtet ihr das Bild nur an der Höhe des Browsers ausrichten reicht einfach die Höhenangabe:

.portrait {
     height: 100%;
}

Ebenso an der horizontalen Breite des Browserfensters, dann mit Breitenangabe:

.landscape {
    width: 100%;
}

Bei den beiden letzten Beispielen mit “portrait” und “landscape” müsst ihr natürlich noch die Klasse des Bildes im HTML-Code entsprechend anpassen.

Viel Spass beim konstruktiven Basteln. Konstruktive Kritik dagegen ist in den Kommentaren gut aufgehoben und stets willkommen.