View Full Version : Background not repeating

08-02-2011, 06:27 PM

I am having trouble with my HTML website when it views in Internet Explorer. It views fine in Firefox. My problem is the background color is not repeating all the way down the page. You can see the problem here: www.lawyerduncan.com when viewing through Internet Explorer.

Here is a section of the code. Does anyone see where the problem is in the code? Thanks, Christine

html {overflow-y:hidden;}

body {overflow-y:auto;}

#page-background {position:absolute; z-index:-1;}

#content {position:static;padding:10px;}

/* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height */

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

/* Set the position and dimensions of the background image. */

#page-background {position:absolute; top:0; left:0; width:100%; height:100%;}

/* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */

#content {position:relative; z-index:1; padding:10px;}

08-02-2011, 06:35 PM
html, body & page-background { height: 100%; } will make the height only 100% of the screen. if your code is correct, min-height: 100%; will work better. everything below it will not take any background-color. like I said before, change position: fixed to position: absolute; on your page-background

08-02-2011, 07:02 PM
Thank you. By changing the code from fixed to absolute, the background color issue was resolved.

Although, the color will not repeat down the page as it does in Firefox. Are you saying there is no way to resolve that issue?

08-02-2011, 07:18 PM
remove position absolute and then try.... and dont use postioning unnecessarily :)

08-02-2011, 07:24 PM
That didn't work?:(

08-02-2011, 07:46 PM
Your full code is wrong... there is repetition in many places in code.... use following DOCTYPE

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

08-02-2011, 09:04 PM
try setting the background to the <body>. absoluting backgrounds is so that you dont have to use margin: 0 auto; 5 times.

then take the body, html { height: 100%; } out