AP257 AP257 - 23 days ago 5
CSS Question

CSS: set background image with opacity?

So, I can see in CSS references how to set image transparency and how to set a background image. But how can I combine these two in order to set a transparent background image?

I have an image that I'd like to use as a background, but it is too bright - I'd like to turn the opacity down to about 0.2. How can I do this?

#main {
background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}

Answer

Two methods:

  1. Convert to PNG and make the original image 0.2 opacity
  2. (Better method) have a <div> that is position: absolute; before #main and the same height as #main, then apply the background-image and opacity: 0.2; filter: alpha(opacity=20);.