Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

help setting background image in css

TodVader

TodVader

macrumors 6502a
Original poster
Sep 27, 2005
596
0
Quebec, Canada
I want to use this image as a background for the div containing my left sidebar, center content and right sidebar:
http://freewebs.com/csstesting/mainbg.jpg

Here's the page I'm testing this on:
http://freewebs.com/csstesting/testing2.html

Here's the HTML:

<html>
<head>
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<link rel="stylesheet" type="text/css" href="testing2.css">
</head>
<body>
<div id="doc">
<div id="head">HEAD</div>
<div id="body">
<div id="main">
<div id="content">CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT<br />CONTENT</div>
<div id="rightnav">ADSENSE</div>
</div>
<div id="leftnav">NAVIGATION</div>
</div>
<div id="foot">FOOT</div>
</div>
</body>
</html>


....And here's the CSS:

#doc {width: 800px;}
#head {
clear: both;
width: 800px;
}
#body {
width: 800px;
background-image: url(mainbg.jpg);
background-repeat: repeat-y;
}
#main {
width: 640px;
float: right;
}
#rightnav {
width: 160px;
float: right;
}
#content {
width: 480px;
float: left;
}
#leftnav {
float: left;
width: 160px;
}
#foot{
width: 800px;
clear: both;
}


I use this method so the content div comes up right after the header in the HTML. My problem is that the background image doesn't work how I thought it would. Does anyone know how to fix this?
 
I just tried putting the background image in the doc div. It works but puts in from the top to the bottom of the page. I could put a header and footer background image which would override the doc background but I wonder why it doesn't work in the body div.
 
It's good practice not to have a Div tag ID to be body. Rather give it something unique, outercontent etc.

To have that image as a background for your document, use the following in your CSS:

body {
background: url(mainbg.jpg) repeat-y;
}

Because your #body div doesn't 'stretch' in height with your content, the background image will not show. I suggest you use 'clearfix', visit alistapart.com and have a look at what it is.

You also have a few errors within your HTML coding. Make sure you visit this page to validate your code.
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back