Nitheesh Nitheesh - 26 days ago 19
CSS Question

How to set opacity for background images using css?

I need to set opacity for my background image and need a solid text through the image. I have gone through several methods for this but I didn't found any solution satisfying my requirement. Can you suggest me the best method for this purpose. Finally all what I want is a div like this.enter image description here

I have gone through many solutions, but majority of them sets the opacity of the div content along with the background. But I need to have a solid contents inside the div as shown in image.

Answer

Use linear then background image URL, something like this

element {
  background: linear-gradient(rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.8)) repeat scroll 0 0, rgba(0, 0, 0, 0) url("yourImageURL.jpg") repeat scroll center center;
}
Comments