css image on top of another for website background
Hi there开发者_如何学Go I am trying to make and image on top of another in 1 tag.
Basically I want an image to be the banner on top, so repeat-x then under it I want the background image repeated multiple times
So something like this
body
{
background:url(banner.jpg); repeat: repeat-x;
background:url(background.jpg);
}
not 100% sure how to do it...I think that explains how I would like it.
I may also want something on the bottom added later so like after that background is done I would want something like background:url(footer.jpg) repeat: repeat-x; bottom
Im thinking this is what youre after.
http://jsfiddle.net/wpqDy/
html {
height: 100%;
width: 100%;
background: url("bg.jpg") repeat 0px 3px;
}
body {
background: url("bg_top.jpg") repeat-x top left;
height: 100%;
width: 100%;
}
You'll need to put background images on two different containers. Perhaps something like this:
<body>
<div id="page">
<div id="content">
...
</div>
</div>
</body>
#page
{
background:url(background.jpg);
}
#content
{
background:url(banner.jpg); repeat: repeat x;
}
CSS3 has support for multiple backgrounds on a single element; this is relatively widely supported, except for IE <= 8. You can write the following:
body
{
background-image: url(banner.jpg), url(background.jpg);
background-repeat: repeat-x, repeat;
}
加载中,请稍侯......
精彩评论