Question

is anyone know how a background image is being cut off due to smaller size of window. Please have a look to this site. http://nfldata.com. Try to make the window smaller than 900px width. Then scroll to the right side. You will find the background image is not there. But for the footer, it appears. What CSS code that causes this problem?

Answer 1

I think you are looking at the background on the content-wrapper div as shown below. Since the width of that element is set to 100%, and the center-block div has a fixed width of 1000px, if you collapse the window to a width that is less than the 1000px the content wrapper will not display and the background will effectively disappear.

HTML Element…

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

Relevant 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;
}

With regards to the header, you will see that it has a declaration of

#header {
  width : 100%
  ...
}

This will set the width of the element to with width of the parent container – in this case it is the active window (in your case is 900px or less). However, since there are other elements on the page which specify a width of 1000px or more, the content inside of those divs appears beyond that.

You could have the page expand by setting the width of body to 1000px (or whatever the maximum width of the page is) in which case, the header would expand to 100% of that size. Or, you could surround the whole content with a relatively positioned , and then the 100% directive would indicate 100% of the width of the surrounding div and not just the window.