Hinzergrundgrafik auf Viewportbreite skalieren

[Gunnar Bittersmann]

@@JürgenB:

nuqneH

ich möchte ein quadratisches Hintergrundbild auf die Breite des Viewports anpassen. Dabei soll das Aspektverhältniss beibehalten werden. Ich habe dieses dadurch realisiert, dass ich das Bild mit Breite 100% in ein Div mit Breite 100% gelegt habe und das Ganze per Z-Index in den Hintergrund schiebe.

Warum?

Du könntest das zusätzliche 'div', was nichts im Markup zu suchen hat, wieder rausschmeißen. Sämtliche gängigen Browser können mittlerweile Hintergrundbilder skalieren: 'background-size' [CSS3-BACKGROUND §3.9] (Firefox mit Präfix).

Der IE kann es mit proprietärem Filter, passt das Bild damit aber in Höhe und Breite an à la 'background-size: 100% 100%'. Wenn das Seitenverhältnis im IE erhalten bleiben soll, müsste man noch etwas Gehirnschmalz reinstecken. Aber ist das hier so wichtig?

html  
{  
    background-image: url(bg.png);  
    background-repeat: no-repeat;  
    -moz-background-size: 100% auto;  
    background-size: 100% auto;  
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.png', sizingMethod='scale');  
    height: 100%;  
    margin: 0;  
    padding: 0;  
}

Qapla'