css - 背景画像が切り取られています

Question

ウィンドウのサイズが小さいために背景画像がどのように切り取られているかを知っている人はいますか。このサイトをご覧ください。http://nfldata.com。ウィンドウの幅を900pxより小さくしてみてください。次に、右側にスクロールします。背景画像がありません。しかし、フッターには表示されます。この問題を引き起こすCSSコードは何ですか？

Answer 1

以下に示すように、content-wrapperdivの背景を見ていると思います。その要素の幅は100％に設定されており、中央ブロックのdivの幅は1000ピクセルに固定されているため、ウィンドウを1000ピクセル未満の幅に折りたたむと、コンテンツラッパーは表示されず、背景が効果的に表示されます。消える。

HTML要素...

<div id="content-wrapper">
   <div class="center-block">
     ....
   </div>
</div>

関連するCSS：

#content-wrapper {
  margin: 0 auto;
  width: 100%;
  background-image: url(/images/content-background.png);
  background-position: center top;
  background-repeat: repeat-y;
}

#content-wrapper .center-block {
  width: 1000px;
}

ヘッダーに関しては、次の宣言があることがわかります。

#header {
  width : 100%
  ...
}

これにより、要素の幅が親コンテナの幅に設定されます。この場合はアクティブウィンドウです（この場合は900px以下です）。ただし、ページには1000px以上の幅を指定する要素が他にもあるため、それらのdiv内のコンテンツはそれを超えて表示されます。

本文の幅を1000px（またはページの最大幅）に設定することでページを拡張できます。その場合、ヘッダーはそのサイズの100％に拡張されます。または、コンテンツ全体を比較的配置されたで囲むことができます。その場合、100％ディレクティブは、ウィンドウだけでなく、周囲のdivの幅の100％を示します。