Complete Cover Background Image Ausgabe

Ich habe derzeit ein komplettes Hintergrundbild. HierComplete Cover Background Image Ausgabe

ist der Code:

#back{ /* #back is a div */ 
    position:absolute; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index:-1; 

    background: url(images/bg.jpg) no-repeat center center fixed; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale'); 
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/bg.jpg', sizingMethod='scale')"; 
}

Es scheint gut zu funktionieren, aber ich entdeckte einen Fehler in es, dass ich jemand hatte gehofft, konnte mir helfen mit.

Wenn ich die Größe des Browserfensters von unten nach oben auf die Hälfte meiner Seite reduziere und dann die Bildlaufleisten des Browsers benutze, um nach unten zu scrollen, folgt der Hintergrund nicht.

Ich bin mit etwas übrig, das

image after scrolling

Gibt es eine Möglichkeit, dies ich bekämpfen kann wie die Bilder unten aussieht? Ich möchte das Hintergrundbild unter allen Umständen abdecken.

Quelle

2012-03-29 Dan Hanly

Es ist kein Problem von background-size:cover. Es ist ein Problem der position:absolute

prüfen diese http://jsfiddle.net/8b27V/

Quelle

2012-03-29 08:48:31 sandeep

So wie ich es lösen? –

Eigentlich vergiss es. Position: fixiert; macht den Trick. Danke, dass du mir meinen Fehler gezeigt hast! Ich habe offensichtlich an der falschen Stelle gesucht –

Wie ich schon erwähnt habe, braucht es Position: fest zur Arbeit. Ihre Lösung scheint zu funktionieren, aber sobald Sie die Notwendigkeit zum Scrollen hinzufügen (d. H. Ein Inhaltsfeld mit fester Höhe), passiert es immer noch. http://jsfiddle.net/8b27V/1/ versuchen Sie es. –

Antwort

Verwandte Themen