Can I set background image and opacity in the same property?
#main {
position: relative;
}
#main:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
width: 100%;
height: 100%;
opacity : 0.2;
z-index: -1;
}
Two methods:
- Convert to PNG and make the original image 0.2 opacity
- (Better method) have a
<div>that isposition: absolute;before#mainand the same height as#main, then apply the background-image andopacity: 0.2; filter: alpha(opacity=20);.