Member Avatar for jesyka82

I have a wrapper div with nested divs. I have set the wrapper to be 100% the height of the screen whatever the resolution (HTML and Body have been set with height:100% and wrapper has been set to min-height:100%), and I have set an image to be the background (not a pattern). In IE8, there is no trouble with the code and the image correctly extends the length of the screen; however, in Firefox 8, the background image stops partway down the screen.

#wrapper {width:1028px; min-height:100%; margin:0 auto; background-image:url(assets/mainbg_T.png);}

Here is a link to the page in question:

Any ideas how to fix it in Firefox?

  • 2 Contributors
  • 4 Replies
  • 219 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by rotten69

Dani AI

Generated

Short summary: the background appears to stop because the element carrying it isn’t actually filling the viewport in Firefox. Percentage-based heights depend on parent heights and on how the layout is cleared, and different engines (and different document flows) can yield different computed heights. ’s Firebug suggestion is exactly the right first step — inspect the computed heights and temporary-outline the wrapper so you can see what is (and isn’t) stretching.

Troubleshooting checklist (quick):

  • Confirm html and body have height:100% and no default margins (margin:0) so percent heights can resolve.
  • Temporarily give the wrapper a solid background-color or a visible outline to reveal its computed height.
  • If the wrapper only contains floated children, it can collapse — fix with a clearfix or overflow:auto so the wrapper grows with its content.
  • Try moving the large decorative image to the body background as a test — if that fills the page, the issue is definitely the wrapper’s height, not the image.

More robust fixes (modern and fallback-friendly):

html, body {
  height: 100%;
  margin: 0;
}

body {
  /* full-page background that avoids wrapper-height quirks */
  background: url('/path/to/bg.png') center top repeat-y;
  background-size: cover; /* modern browsers */
}

Or keep the wrapper but use viewport units:

#wrapper {
  min-height: 100vh;   /* ensures full viewport height without parent height hacks */
  margin: 0 auto;
  max-width: 1028px;
}

Note on the absolute-position centering you tried: it can fix the visual gap, but it removes the wrapper from normal flow and can introduce overlap/responsiveness problems. Prefer using body as the page background, a clearfix/overflow fix for floats, or min-height:100vh for predictable, cross-browser results.

Recommended Answers

All 4 Replies

Member Avatar for rotten69

Maybe because you've got the attribute min-height(do you really need this?) Remove it and see what it looks like.

cheers,

Member Avatar for jesyka82

Maybe because you've got the attribute min-height(do you really need this?) Remove it and see what it looks like.

cheers,

Without min-height:100% the background on the wrapper does not appear at all in Firefox8. With height:100%, it shows the background, but it is stunted in both Firefox8 AND IE8.

Member Avatar for jesyka82

Without min-height:100% the background on the wrapper does not appear at all in Firefox8. With height:100%, it shows the background, but it is stunted in both Firefox8 AND IE8.

I stumbled upon a solution on a blog. I set the wrapper position to absolute, set the left position to 50% and set the left margin to a negative margin half the width of the wrapper, and it properly positioned the div in the center of the page, and filled the page with the background image. Here's a link to the solution: http://www.zachgraeve.com/2006/10/01/center-abosulte-position-div/

Member Avatar for rotten69

it's hard to solve a problem without experinmanting with things. A handy tool that you may want to use for debugging HTML, JavaScript and CSS. It's a firebug add-on in Firefox browser.


I'm glad you found something that helped you with the problem you had.

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.