I need to have my background image span the entire length of the page without using the BODY element, here's why: I separated the image into left and right sections so even for different resolutions, the left image will always be on the left, and same with the right. Because of this, I have to use two DIVs, each with one part of the image. The problem is, I haven't seen any way to get them to span the entire height of the page. Setting width: 100%;
only sets these to 100% of the viewport. Any ideas?
Edit: here is the CSS I currently have (for those specific parts):
.bodyContent .bg_l
{
position: absolute;
z-index: -1;
top: 0px;
left: 0px;
height: 100%;
width: 500px;
background-image: url('http://img22.imageshack.us/img22/2778/bgl.jpg');
background-repeat: repeat-y;
}
.bodyContent .bg_r
{
position: absolute;
z-index: -1;
top: 0px;
right: 0px;
height: 100%;
width: 500px;
background-image: url('http://img15.imageshack.us/img15/5810/bgrf.jpg');
background-repeat: repeat-y;
}
Edit again: I just realized that in IE (horrible thing that it is) the background won't span any of the page except for a small, ~15px part at the top. If you want to take a look at this, here is the page.