26


8

CSS:スクロールすると背景画像が塗りつぶされない

一度にロードする非常に小さなサイトで作業しているため、すべての背景画像を保持するdivがあり、その上に(つまり、 *より高いz-index *)すべてを保持するコンテンツdivがあります。 選択したコンテンツに基づいて背景を簡単に切り替えることができます。

残念ながら、スクロールバーが表示されるように小さなウィンドウで起動すると、スクロールすると、ページの「公開された」部分に背景画像がありません。 :-(

ページ構造:


css:

#bg
{
    margin: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width:100%;
    height: 1024px;
    z-index:1;
}
.bgone
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/one.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:2;
}
.bgtwo
{
    margin: 0px;
    position: absolute;
    width:100%;
    height: 1024px;
    background-image:url(../images/two.jpg);
    background-position:top;
    background-repeat:repeat-x;
    z-index:3;
}
#container
{
    position:relative;
    width:900px;
    padding:0px;
    margin:0px auto;
    height:600px;
    z-index:10;
}

8 Answer


28


私は同じ問題を抱えていて、それは迷惑です。 私にとっての問題は、HTMLを変更できず、CSSだけを変更できなかったため、追加のdivを削除できなかったことです。

問題は、背景に「幅:100%」があり、コンテナに「幅:900px」があることです。 したがって、たとえば、ブラウザウィンドウの幅が800ピクセルの場合、背景は800ピクセルに設定されるため、ウィンドウを水平にスクロールすると、背景のない領域が得られます。

この問題を修正する別の方法は、背景から「幅:100%」を削除し、それを「最小幅:900px」に置き換えることです。これにより、背景が常に少なくともコンテナと同じ幅になるようにします。 ウィンドウのサイズが900px未満になると、背景は常にコンテナと同じままになります。 御馳走を働かせる。


9


私は同じ問題を抱えていました。 これはoverflow-xで修正されました:scroll;

    top:0px; bottom: 0px;
    height: 100%;
    background-repeat: repeat;
    position: absolute;
    overflow-x: scroll;


4


答えはここにあります:

要するに、私は物事を過度に複雑にしていた。 解決策は次のとおりです。

  1. bg画像を保持するdivを取り除きます-寸法を設定する必要があります bg imgを見るためだけに100%になりますが、それは表示領域/ビューポートの100%に過ぎず、スクロールしても再計算されません。

  2. * bg画像をbody要素に直接適用します* 寸法はビューポートの初期サイズに制限されません

そして私の場合(複数のbg画像を使用):

  1. bg画像ごとに個別のcssスタイルを作成してから、

  2. jqueryを使用してボディに適用します-例 $(body).addClass( "specialbg");等


3


「背景から「幅:100%」を削除し、「最小幅:900px」に置き換える」というStegの提案に追加します。最小幅。 そうでない場合、幅が最小幅よりも大きい場合、一部のブラウザは最小幅を超えてそれを繰り返さない場合があります。


3


私はこの問題を抱えており、次の問題を修正しました。

html {
    background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
    color: white;
    background: transparent;
}
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item
      item


2


`background-repeat:repeat-x`を使用すると、上部に沿って繰り返される背景画像が1行だけ表示されます。 そのCSSプロパティを完全に削除すると、背景画像が水平方向と垂直方向の両方に並べて表示されます。 背景画像の高さが1024pxでない限り、含まれているdivは塗りつぶされません。


2


私の場合、解決策は、問題のdivに固定の高さや幅を設定することでした。


1


親/要素に高さを設定している場合、画像が破損する可能性があります。

たとえば、ほとんどの人はコードでこれを使用します

body {
   height: 100%; //avoid it
}