Center große Tapete in kleinen Browser

Question

Ich habe eine sehr große Tapete (1920x1080 - Full HD) auf meiner Website, und ich will es in der Mitte des Bildschirms zentrieren, anstelle der linken Seite, wenn das Browserfenster kleiner ist als das Bild.

Mein aktueller Markup sieht wie folgt aus:

<div id="wallpaper"> 
    <img /> 
</div> 

und die Stile sind:

div#wallpaper 
{ 
    height: 100%; 
    left: 0px; 
    position: absolute; 
    top: 0px; 
    width: 100%; 
    z-index: 1; 
} 

div#wallpaper img 
{ 
    display: block; 
    margin: 0px auto; 
} 

ich ein img-Tag bin mit, weil ich es async durch jquery laden, und ich bin Verwenden Sie absolute Position für das übergeordnete Element, um sicherzustellen, dass es außerhalb des Seitenflusses bleibt. Schließlich ist mein Inhalt mit einem Z-Index höher als 1 positioniert.

Das Problem mit dem oben genannten ist, wenn Ihr Browser nur 1024x768 ist, sehen Sie nur die linke Seite des Bildes - ich will es sei der mittlere Teil.

Das bedeutet, es sollte von beiden Seiten nach rechts und links abgeschnitten werden, wenn das Hintergrundbild größer als das Browserfenster ist.

Hoffnung das alles Sinn gemacht, sonst fragen Sie bitte :-)

Answer 1

Ich bin mir nicht sicher, was Sie wollen, ist möglich zu tun, so wie Sie es tun.

Was ich tun würde, ist das Bild als Hintergrundbild des Wallpaper div, und dann die Hintergrundposition, um das Bild zu zentrieren.

z.

<div id="wallpaper" style="background-image: foo.jpg"></div>

und in CSS ...

div#wallpaper 
{ 
    background-position: top 50%; 
}