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?