browser does not fill the background properly with repeat-x

Question

hi there,

in the header menu i am using an image with repeat-x property. it works perfectly in full screen however in low resolution i.e in 1024X768 and 800X600 screen it leaves some margin. it leaves the margin when a horizontal scroll takes place. how do i make sure even if horizontal scroll exist the repeat-x property should cover the area of the scroll. is there any css property for this?

the css for this i am using is.

#header {
    height: 111px;
    background: url('../img/header-bg.jpg') repeat-x;
    width: 100%;
}

let me know if you want more code ill host it in jsfiddle. thank you.

i have hosted my site in http://iarmar.com/test/bn just in case you want to test.

Answer 1

Set min-width: 1040px; to your #header

Answer 2

As expalined in my comment (and by Jeaffrey), set your #header with a min-width or use 100%.