SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to specify background image for the body in a div

    Ok in the stylesheet I have the body tag using a repeating background image. I also want to have a second background image that doesnt repeat and starts at the top of the page and is centered. I tried using a div on the outside of the main container div but when I do this the background image lines up as the background of the container div. How can I get a second image as the centering background image centered to the whole page starting at the top of the page?

    Code:
    body
    { margin:0px; margin-bottom:80px; padding:0px; background:#000 url('../images/top_bg.gif') repeat-x; }
    #container_wrapper { background:transparent url('../images/sedona_bg.gif') no-repeat top center; }
    #container { padding:0px; margin:0px; margin-top:130px; margin-left:auto; margin-right:auto; text-align:left; width:900px; min-height:400px; overflow:hidden; background:#fff; }
    html>body #container { width:900px; }
    * html #container { height:400px; overflow:visible; }
    #main_menu { margin:0px; padding:0px; background:#000 url('../images/menu_bg.gif') repeat-x; overflow:hidden; text-align:left; }
    * html #main_menu { height:26px; }
    #main_menu li { list-style-type:none; float:left; margin:0px; color:#fff; font-family:verdana; font-size:.70em; font-weight:bold; }
    #main_menu li a { float:left; padding-left:20px; padding-right:20px; min-height:26px; line-height:25px; background:url('../images/menu_border.gif') repeat-y right; text-decoration:none; color:#fff; }
    * html #main_menu li a { height:26px; }
    #main_menu li a:hover { color:#fff; text-decoration:underline;
    }
    Page:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd"> <html>
    <head> <title></title> <link href="css/default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container_wrapper"> <div id="container"> <ul id="main_menu"> <li><a href="#">Home</a></li> <li><a href="#">Courses</a></li> <li><a href="#">Equipment</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div>
    </body>
    </html>

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    How can I get a second image as the centering background image centered to the whole page starting at the top of the page?
    Hi,
    Move the overflow from the #container to the #container_wrapper and trip IE haslayout with a width. Then remove the overflow reset for IE6 on the * html #container.

    That should fix everything, it worked locally for me with a BG color in place of the image.

    Code:
    #container_wrapper {
        background: transparent url('../images/sedona_bg.gif') no-repeat top center;
        overflow: hidden; /*moved from container*/
        width:100%; /*haslayout for IE*/
    }
    #container {
        padding: 0px;
        margin: 0px;
        margin-top: 130px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        width: 900px;
        min-height: 400px;
        /*overflow: hidden;*/
        background: #fff;
    }
    html>body #container {
        width: 900px;
    }
    * html #container {
        height: 400px;
        /*overflow: visible;*/
    }
    Complete test code -
    Edit:

    I just transferred the IE6 menu styles from the other thread into the test code below

    Code HTML4Strict:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>demo</title>
     
    <style type="text/css">
    /*===== Resets =====*/
    body, address, blockquote, dl, ol, ul, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, pre {
        margin: 0;
        padding: 0;
    }
    body {
        margin: 0px;
        margin-bottom: 80px;
        padding: 0px;
        background: #000 url('../images/top_bg.gif') repeat-x;
    }
    #container_wrapper {
        background: red url('../images/sedona_bg.gif') no-repeat top center;
        overflow: hidden; /*moved from container*/
        width:100%; /*haslayout for IE*/
    }
    #container {
        padding: 0px;
        margin: 0px;
        margin-top: 130px;
        margin-left: auto;
        margin-right: auto;
        text-align: left;
        width: 900px;
        min-height: 400px;
        /*overflow: hidden;*/
        background: #fff;
    }
    html>body #container {
        width: 900px;
    }
    * html #container {
        height: 400px;
        /*overflow: visible;*/
    }
    #main_menu {
        margin: 0px;
        padding: 0px;
        background: #333 url('../images/menu_bg.gif') repeat-x;
        overflow:hidden; /*float containment for modern browsers and haslayout for IE7*/
        text-align: left;
    }
    * html #main_menu {height:1%; overflow:visible;} /*IE6 haslayout and overflow reset*/
     
    #main_menu li {
        list-style-type: none;
        float: left;
        margin: 0px;
        color: #fff;
        font-family: verdana;
        font-size: .70em;
        font-weight: bold;
    }
    #main_menu li a {
        float: left;
        padding-left: 20px;
        padding-right: 20px;
        min-height: 26px;
        line-height: 25px;
        background: url('../images/menu_border.gif') repeat-y right;
        text-decoration: none;
        color: #fff;
    }
    * html #main_menu li a {
        height: 26px;
    }
    #main_menu li a:hover {
        color: #fff;
        text-decoration: underline;
    }
    </style>
    </head>
    <body>
     
    <div id="container_wrapper"> 
        <div id="container"> 
            <ul id="main_menu"> 
                <li><a href="#">Home</a></li> 
                <li><a href="#">Courses</a></li> 
                <li><a href="#">Equipment</a></li> 
                <li><a href="#">About Us</a></li> 
                <li><a href="#">Contact Us</a></li> 
            </ul> 
        </div> 
    </div>
     
    </body>
    </html>

  3. #3
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woops sorry took so long to reply. I actually tried it and it does put the image in the background and centers it, the problem again is the container div then gets pushed to the very top and you cant see the background image from the container_wrapper div. So I add a margin top on the body propery and it pushes the container div as well as the container_wrapper div so it puts the problem back to square one where the background image is stuck right behind the container div. I want it to show at the very top of the page with the container div 130px down from the top.

  4. #4
    SitePoint Wizard Sillysoft's Avatar
    Join Date
    May 2002
    Location
    United States :)
    Posts
    1,691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well I got it to work, I set the margin on the container div instead of the body tag. So hopefully that was the correct thing to do. Thanks for your help!


Bookmarks

Posting Permissions

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