Background image not appearing in Firefox

[dwlamb_001]

Hello all,

I'm having a CSS issue. Here is a sample of the site http://challenged.dwlamb.com/. If viewed in IE, there's no problem. In FF, Chrome and Safari, the background image stops when it hits the content div.

These are the divs

#wrapper{
  background: #ffffff url('../images/axis-y_bkgrd.jpg') repeat-y fixed center top;
  margin:0 auto;
  overflow:visible;
  width:710px;
}

#content{
  background-image:url('../images/content_bkgrd.jpg');
  background-repeat:repeat-x;
  float:left;
  margin:0 5px;
  overflow:visible;
  min-height:700px;
}

If you look at the CSS on the sample cited above there is more complete code. The div #content is inside div #wrapper.

I've encountered something similar with background colors previously but can not remember how I resolved it.

Thank you for having a look and any assistance you can offer,

D.

[drjohn]

#wrapper{
    background: #ffffff url('../images/axis-y_bkgrd.jpg') repeat-y fixed center top;
    margin:0 auto;
    overflow:visible;
    width:710px;
}

Should have overflow:hidden;

overflow:visible means that you can see it overflowing from the div, with the div itself stopping where its own content stops.. hidden means that it doesn't overflow out of the div, but stays inside it and forces the div to expand. Hence the border will then be around all the content.
Simples.

[dwlamb_001]

Thanks for the input, drjohn. But I tried all permutations of overflow and that did not solve the problem.

It turns out the solution is this:

body{
  background: #ffffff url('../images/axis-y_bkgrd.jpg') repeat-y fixed center top;
}
#wrapper{
  margin:0 auto;
  overflow:visible;
  width:710px;
}

I'll leave the page there for the weekend maybe a little longer so you can take a look.

Thanks for the help.