センターの大きな壁紙を小さいブラウザで表示

Question

私のサイトには非常に大きな壁紙（1920x1080 - フルHD）があり、ブラウザウィンドウが小さい場合は、画面の中央に中央の中央にしたい画像よりも

私の現在のマークアップは次のようになります。

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

とスタイルは次のとおりです。

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

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

私はjqueryの経由非同期（async）それを読み込むので、私は、imgタグを使用している、と私は思い親divのposition absoluteを使用してページフローから離れないようにします。最後に、私のコンテンツはZインデックスが1よりも高い位置に配置されます。

上記の問題は、ブラウザが1024x768の場合、画像の左側が表示されるだけです中間部分である。

壁紙がブラウザウィンドウより大きい場合は、左右両側から切り抜く必要があります。

希望はすべて、これはそうでない場合、私は、方法は、あなたがそれをやっている可能性が何であるかをあなたがしたいかわからない

Answer 1

:-)お問い合わせください、意味を成していました。

私がやることは、画像を壁紙のdivの背景画像に設定してから、背景の位置を画像の中央に設定することです。

例えば、

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

とCSSで ...

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