Member Avatar for dwlamb_001

Hello all,

I'm having a CSS issue. Here is a sample of the site . 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.

  • 2 Contributors
  • 2 Replies
  • 95 Views
  • 14 Hours Discussion Span
  • Latest Post Latest Post by dwlamb_001

Dani AI

Generated

Good troubleshooting by and a useful nudge from . The underlying issue is the wrapper not containing a floated child: when a parent only holds floats its height can collapse in modern browsers (IE historically avoided that via "hasLayout"), so the wrapper's background only painted for the collapsed area. Making the wrapper establish a block formatting context (BFC) or moving the page background to the viewport (body) both fix the visible symptom.

Two practical ways to fix without moving the background to body:

  • Use a modern clearfix so the wrapper expands to contain floats.
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
  • Or use the modern CSS containment for that effect:
.wrapper {
  display: flow-root;
}

Both approaches make the wrapper include its floated children and let its background extend as expected. Using overflow: auto or hidden also creates a BFC, but hidden can clip shadows or overlapping content, so use with caution.

If the goal is a viewport-anchored background (fixed to the screen), applying it to the body is appropriate because background-attachment: fixed is viewport-relative. For deeper reading on BFCs and viewport-fixed backgrounds, see the MDN pages on block formatting contexts and background-attachment: fixed. Use browser devtools to inspect computed heights and to confirm which element holds the background.

Recommended Answers

All 2 Replies

Member Avatar for 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.

Edited by mike_2000_17 because: Fixed formatting
Member Avatar for 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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.