Forum Moderators: not2easy
I have set a background image on my page. Two, actually. A left-aligned one and a right-aligned one, both gradients that fade to white in the middle when they are properly displayed on the page.
They have their own styles, and I set them right after the body tag:
<body>
<div class="left"></div>
<div class="right"></div>
But they do not tile unless I've set the height of the divs to 100%. This is fine unless the content of the page expands beyond the bottom of the browser screen. I've seen this problem mentioned before but never with regards to the background. Here are the two styles (both background images are 300px wide and 150px high):
.left {
position: absolute;
background-image: url(images/left-3.jpg);
background-repeat: repeat-y;
background-position: top left;
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
.right{
position: absolute;
background-image: url(images/right-3.jpg);
background-repeat: repeat-y;
background-position: top right;
width: 100%;
height: 100%;
margin-left: 0px;
margin-top: 0px;
z-index: 0;
}
The background images do not show up at all unless I set a height: (something other than auto). I also tried nesting the divs (first left, then the right inside that, then the rest of the page content inside *that*) at a friend's suggestion, and this didn't work.
WHY is it that I cannot get a simple image to tile vertically without setting the height attribute? Everyone else seems to be able to!
One of my styles was killing the left background no matter what I did, and I've simply decided to scrap that style (it defined the placement and size of the content area). I used a table instead.
Now...how do I get a nice 3 pixel border at the very bottom of my table? Right on the edge, I mean. I'm having trouble placing a div with a bottom border right at the interface of table and background.
WHY is it that I cannot get a simple image to tile vertically without setting the height attribute?
Probably because, without the height attribute, the <div>s have no height, and without any height, there isn't anywhere to PUT the image. I'm guessing those two <div>s are either (a) empty of content, or (b) contain floats?
If you're interested in solving that particular problem, post the html for the <div>s so we can see what's inside. If you no longer care, that's cool, too.
