Henry Featherstone
New member
Here is a small snippet of code. I can't seem to make the bottom image go to the bottom of the page. Thanks for any help!
<body style="background-color: #d5e5f4;">
<!--#d5e5f4 matches the bottom color of the sky_tile image-->
<div id="topimage" style="background-image: url('images/sky_tile.jpg'); background-repeat: repeat-x; height: 424px;"></div>
<div id="content" style="position: absolute; z-index: 1; top: 2em; width: 800px; left: 2em;">
<p>This is where the content goes.</p></div>
<div id="bottomimage" style="background-image: url('images/sky_tile_upsidedown.jpg'); background-repeat: repeat-x; height: 424px;"></div>
</body>
The content layers over the top image nicely, but I can't position the bottom image.
How do I make the bottom image div float to the bottom of the page, so the bottom part of the content is layered over the bottom image, and the center of the content has the body backround color behind it? The content will have a height greater than the two images together. The bottom image keeps floating up to the bottom of the top image. I have tried all the relative and absolute positioning I can think of.
Thanks to anyone who can help me position the bottom image div!
<body style="background-color: #d5e5f4;">
<!--#d5e5f4 matches the bottom color of the sky_tile image-->
<div id="topimage" style="background-image: url('images/sky_tile.jpg'); background-repeat: repeat-x; height: 424px;"></div>
<div id="content" style="position: absolute; z-index: 1; top: 2em; width: 800px; left: 2em;">
<p>This is where the content goes.</p></div>
<div id="bottomimage" style="background-image: url('images/sky_tile_upsidedown.jpg'); background-repeat: repeat-x; height: 424px;"></div>
</body>
The content layers over the top image nicely, but I can't position the bottom image.
How do I make the bottom image div float to the bottom of the page, so the bottom part of the content is layered over the bottom image, and the center of the content has the body backround color behind it? The content will have a height greater than the two images together. The bottom image keeps floating up to the bottom of the top image. I have tried all the relative and absolute positioning I can think of.
Thanks to anyone who can help me position the bottom image div!