Background image annoyance.

[GazMathias]

Hi,

I'm writing a system which will use a designer to style the customer facing stuff, but I'm styling the admin bits myself. I have set a 600 x 4px gradient

image to fill the body:

body {
    background-image:    url('/assets/image/admin_bg.png');
    margin:                0 auto;
    font-family:        Lucida Grande, Verdana, Sans-serif;
    font-size:            12px;
    color:                #000;
}

All of my admin content goes into a div called #content:

#content  {
    width:                 660px;
    margin:             0 auto;
    margin-top:         40px;
    border:                #999 1px solid;
    background-color:    #fff;
    padding:            12px;
}

My problem, is that frequently on page load the background image is only visible adjacent to the sides of the content div with whitespace above and below (see pic). Refreshing the page sometimes cures it and hovering over a link magically makes it fill the page, too!

This behaviour is manifesting in Chrome and IE7, but curiously not FF 3.5?

Gaz

[drhowarddrfine]

You probably need to set height/width to the body element. In this case, 100% for each may suffice.

[GazMathias]

Hi

Thanks for your suggestion, however it did not work.

What seems to do the trick (for now) is:

background-repeat: repeat;
 

I thought that was the assumed default?

Gaz

[drhowarddrfine]

'tis not but I misunderstood your question.