Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Background not repeating

    Hello,

    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;}

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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
    Last edited by Sammy12; 08-02-2011 at 07:39 PM.

  • #3
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #4
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    remove position absolute and then try.... and dont use postioning unnecessarily

  • #5
    New to the CF scene
    Join Date
    Aug 2011
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That didn't work?

  • #6
    Regular Coder
    Join Date
    Jul 2011
    Location
    India
    Posts
    496
    Thanks
    3
    Thanked 57 Times in 56 Posts
    Your full code is wrong... there is repetition in many places in code.... use following DOCTYPE

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

  • #7
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •