Trying to specify background image for the body in a div

**Sillysoft** · Apr 19, 2009 12:06

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>

**Rayzur** · Apr 19, 2009 12:59

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>

**Sillysoft** · Apr 20, 2009 20:05

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.

**Sillysoft** · Apr 20, 2009 20:20

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!

User Tag List

Thread: Trying to specify background image for the body in a div

Thread Tools

Display

Trying to specify background image for the body in a div

Bookmarks

Bookmarks

Posting Permissions