Forum Moderators: not2easy
The body has a striped background. I have a content wrapper that is a fixed width, with auto margins to center the site.
I have a fixed height header with a fixed background, a scaling main body with a tiling background, and a fixed height footer with a fixed background.
It is the main body that the background won't show up in any browser. If I give it height, like 100%, it works in IE, but not Firefox or Opera.
The backgrounds in the header and footer are transparent PNGs with rounded corners, so the body background will show behind them, otherwise I would put the tiling background in the outer content wrapper.
The CSS looks like this...
#container
{
width: 950px;
margin: auto;
}
#header
{
height: 44px;
background-image: url("images/bg_header.png");
}
#main
{
background-image: url("images/bg_center.png");
}
#left
{
float: left;
width: 176px;
padding: 0 20px 0 22px;
}
#right
{
float: right;
width: 594px;
padding: 0 78px 0 60px;
}
#footer
{
clear: both;
height: 68px;
background-image: url("images/bg_footer.png");
}
The HTML looks like this...
<body>
<div id="container">
<div id="header">Some content.</div>
<div id="main"> << This is where the background tile doesn't show.
<div id="left">Some content.</div>
<div id="right">Some content.</div>
</div>
<div id="footer">Some content.</div>
</div>
</body>
Any help would be greatly appreciated.
[edited by: Fatbat at 6:48 pm (utc) on Dec. 28, 2007]
