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 the 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?
asked May 9, 2011 at 8:02
PathOfNeo
1,0894 gold badges21 silver badges39 bronze badges
1 Answer 1
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;
}
answered May 9, 2011 at 8:11
grc
23.7k5 gold badges45 silver badges63 bronze badges
Sign up to request clarification or add additional context in comments.
1 Comment
PathOfNeo
ps. i needed to add: position:absolute; to your example above and that put the 2nd div background in the center not pushing other divs.
default