Multiple background image css question
I have a pattern background image that is repeating itself on the body tag The image is 256x256 pixels.
body {
font: 12px/1.4 Helvetica, sans-serif;
color: #fff;
background-image: url("img/bg1.jpg");
background-repeat:repeat;
}
#bg2{
?
}
#wrap{
width:960px;
margin:0 auto;
}
Then i'v got a second image, which i want to be fixed in the center of th开发者_高级运维e screen overlapping the body image. This image is the second bacground image, it does not need to repeat itselft. Dimensions: 400x800px.
This 2nd image looks the same as the first on the edges, but has some lightning in the middle, so you sea, i need maybe some sort of transparency.
The HTML:
<body>
<div id="wrap">
<div id="bg2">..here comes the 2nd bkground image..</div>
....content
</div>
</body>
Problem is, multiple bacground image is not so easy to acomplish. Can somebody help?
Try something like this:
#bg2 {
position: absolute;
height: 100%;
width: 100%;
background: url('img/bg2.jpg') no-repeat fixed center;
/* IE transparency */
filter: alpha(opacity=60);
/* standard transparency */
opacity: 0.6;
}
加载中,请稍侯......
精彩评论