2

レスポンシブレイアウトをデザインしていて、次のCSSを使用して、背景の上に汚れたpngオーバーレイを配置しました。

#bg{
   background:url(images/top1.png) no-repeat; 
   position:absolute; 
   width:1423px; 
   height:350px; 
   top:0; 
   left:50%; 
   margin-left: -711px;
}

このように、画像はページ幅に関係なく常に中央に配置されます。#bg私の問題は、ブラウザウィンドウがオーバーレイの背景画像よりも小さい幅に縮小されたときに発生します。水平スクロールバーが表示され、背景が右端まで広がります（特にブラウザが非常に小さい場合）。

あなたはここでこれのデモを見ることができます：http：//pixelcakecreative.com/cimlife/response2/

水平スクロールバーが表示されているので、ブラウザウィンドウを縮小して、画像の全幅を保持しないようにします。何か案は？

4

2 に答える 2

1

このcssコードを試してください：

      #bg{
 background:url(images/top1.png) no-repeat center;
 position:absolute;
 width:100%;
 height:350px;
 top:0px;
 left:0px;
 }
于 2011-12-03T20:10:04.187 に答える
0

コードをざっと見てみました。あなたのナビゲーションをチェックしてください、これはスクロールバーを生成します。

ブラウザの開発者ツールがページを検査できるようにする方法をご覧ください。これは、要素の属性を確認するための良い方法です。

Chromeの良い紹介は次のとおりです：リンク

そしてSafariの場合：リンク

于 2011-12-04T16:57:31.277 に答える