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?