Okey so basically I have:
<div id="content">
... content of arbitrary size ...
</div>
<div id="content_bottom"></div>
The style is:
#content {
background: transparent url(content_tile.png) center top repeat-y;
width: 800px;
}
#content_bottom {
background: transparent url(content_bottom.png) center top no-repeat;
height: 200px;
width: 800px;
}
content_tile.png
is a 800x1
image (tiles vertically), and has transparency. content_bottom.png
is a 800x200
image.
Basically, I need to have the content_bottom.png
image to replace the #content
background image only on the bottom. Having a negative margin on #content
almost works, but since both images are transparent images, they overlap, and it should not happen.
I think that I need to make #content
not to render its background on the last 200px on its bottom. Any idea how I could do that ?
If you altered your markup slightly and used javascript you could do it with an absolutely positioned div that contained only the background. Then onload, set #repeating-background's height to (#content's height - 200px):
HTML
<div id="content">
<div id="text">
This is where your content would go
</div>
<div id="repeating-background"></div>
</div>
CSS
#content {
position: relative;
width: 800px;
background: url(content_bottom.png) left bottom no-repeat;
}
#text {
position: relative;
z-index: 2;
}
#repeating-background {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 800px;
height: 1px;
background: url(content_tile.png) left top repeat-y;
}
Javascript (jQuery)
$(document).ready(function() {
$('#repeating-background').height($('#content').height() - 200);
});
创建一个嵌套在#content中的第三个div,高度为200px。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.