Question

I’ve been working on a website with a pretty standard layout, header, content, footer, each being a DIV with a 900px width inside of a page-wide DIV, just like the one described in this question:

Full width background, without a wrapper

Now the problem itself is that whenever the browser window becomes less wide than the specified DIV width (900px) the background of the wrapper seems to disappear, showing the background color of the website itself. This also happens while using the code in the aforementioned question.

This is the CSS code:

#headerwrapper {
    height: 229px;
    background: url(imagenes/header.gif);
    background-repeat: repeat;}

#header {
    width:900px;
    height:229px;
    padding:0px;
    margin:0 auto;
}

And this one is the HTML code:

<div id="headerwrapper">
    <div id="header">
      Content goes here.
    </div>
</div>

Any suggestions are appreciated.

Answer 1

you probably can’t see the background in the scrollarea. You need to set min-width: 900px; or max-width: 900px; so that the background will be shown in the scrollarea.