ghoti ghoti - 19 days ago 5
CSS Question

Background image only being displayed once

I have a strange problem that I can't get my head around:

I have a header div and I would like to display a background image to be repeated horizontally:

The HTML:

<div id="headerwrapper">

<div id="header">
<p>This is an extremely interesting test. This is an extremely interesting test. This is an extremely interesting test.</p>
</div>

</div>


Here is the CSS:

* {
margin:0;
padding:0;
}

#headerwrapper {
margin:0 auto;
width:630px;
}

#header {
width:630px;
background-image:url(../images/headermiddleback.jpg);
background-repeat:repeat-x;
}


When I look at it in the browser, I can see only 1 instance of the background-image being displayed above the text. But it is not repeating.

Any idea what I am doing wrong here?

Answer

You might want to use repeat-y instead of repeat-x

#header {
    width:630px;
    background-image:url(http://dl.dropbox.com/u/4457768/css/headermiddleback.jpg);
    background-repeat:repeat-y;
}