Automatisch skalierende Hintergrundbilder nur mit CSS (auch IE)

Publiziert am by & filed under CSS, Webdesign.

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…

Werbung

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">
Hier kommt euer Inhalt hin
&nbsp;
</div>
&nbsp;
<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.

4 Kommentare zu “Automatisch skalierende Hintergrundbilder nur mit CSS (auch IE)”

  1. Knut H.

    Ich hab das mal getestet. Funktioniert soweit auch wunderbar.
    Nur leider habe ich unter dem Bild einen weißen Streifen! Wie bekomme ich den weg?
    Danke für die Hilfe.

    Viele Grüße
    Knut

Ihr Kommentar

  • (will not be published)