1

この問題は、フィドルを作成するのに少し問題がありますが、同様の問題があるテンプレートを見つけました: http://www.elegantthemes.com/demo/?theme=StudioBlue

問題は次のとおりです。すべてのコンテンツを内部に含むラッパーと、繰り返しなしで上部中央に配置された背景画像があります。ウィンドウのサイズがコンテンツ/ラッパーのサイズよりも小さくなるまでウィンドウのサイズを変更するまで、すべてがうまく見えます。

この時点で、コンテンツの左端がブラウザーの左側に揃えられ、下部にスクロール バーが表示されるため、すべてが正常に表示されます。ただし、右にスクロールすると、背景画像が (中央に配置されているため) 実際には左に移動し、画面の一部になり、右側に空白が残っていることがわかります。ウィンドウのサイズが小さくなりすぎたときに、背景画像をだまして左側から外れるのではなく、画面上にとどめる方法はありますか?

4

2 に答える 2

1

問題は、スクロール幅に対して画像を中央に配置する必要があるときに、ウィンドウの幅に対して画像が中央に配置されていることです。これを修正するには、html の上部に別の div を作成して、背景画像を設定します。

#image-div {
    position: absolute;
    min-height: 100%;
    width: 100%;
    background: #000 url('image.jpg') no-repeat center top;
}

関連: https://stackoverflow.com/a/15792723/1721527

于 2013-10-02T19:43:22.067 に答える