web-dev-qa-db-ja.com

CSS：スクロール時に背景画像がいっぱいにならない

一度に読み込まれる非常に小さなサイトで作業しているため、すべての背景画像を保持するdivがあり、その上に（つまりhigher z-index）保持するコンテンツdivがありますすべて。選択したコンテンツに基づいて、背景を簡単に切り替えることができます。

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

ページ構造：

<body>
<div id="bg">
    <div class="bgone"></div>
    <div class="bgtwo"></div>
</div>

<div id="container">
<!-- content panels here -->
</div>
</body>

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;
}
cssscrollbackground-image
26
rekindleMyLoveOf

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

私が見る問題は、背景の幅が「100％」で、コンテナの幅が「900px」であるということです。したがって、たとえば、ブラウザウィンドウの幅が800pxの場合、背景は800pxに設定されるため、ウィンドウを水平方向にスクロールすると、背景のない領域が表示されます。

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

28
Steg

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

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

答えはここにあります：

http://bytes.com/topic/html-css/answers/577902-background-image-getting-cut-off-outside-original-window-display

要するに、私は物事を過度に複雑にしていた。解決策は：

  1. bg画像を保持するdivを削除します。bgimgを表示するためだけに寸法を100％に設定する必要がありますが、それは表示領域/ビューポートの100％にすぎず、スクロールしても再計算されません。
  2. 任意のbg画像をbody要素に直接適用しますそのサイズはビューポートの初期サイズに制限されていないため

そして私の場合（複数のBG画像を使用）：

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

  2. jqueryを使用してそれらを本文に適用します-例：$（body）.addClass（ "specialbg"）;等

4
rekindleMyLoveOf

私はこの問題があり、次のように修正しました：

html {
    background-image: url('http://www.standardbrand.com/media/1237/home.jpg');
}
body{
    color: white;
    background: transparent;
}
<!DOCTYPE html>
<html>
  <body>
    <ul>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      <li>item</li>
      </ul>
    </body>
  </html>
3
Helzgate

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

3
neil1967

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

2
carillonator

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

2
amypellegrini

ただの注意ですが、親/要素に高さを設定していると、画像が壊れる可能性があります。

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

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