How can I change the background image opacity without affecting the background color?

user_472377 0
Viewed 2250

I've got a div with a background color and a transparent background image.

HTML

<div class="watermark">
    <div class="col-md-12">Something else</div>
    <div class="col-md-12">Something more..</div>
    <div class="col-md-12">Something at the end</div>
</div>

CSS

body{
  background-color:white;
}

.watermark {
  display: block;
  position: relative;
}

.watermark::after {
  content: "";
 background:#C52F11 url(https://www.google.co.in/images/srpr/logo11w.png)no-repeat;
  opacity: 0.2;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

jsfiddle

I want to be change the opacity of the image, but leave the background color unaffected. But when I set the opacity, both change.

Is there a way to do this?

css html
4 Answers

It's a trick:

  1. Insert the image into the webpage anywhere(regardless of the size).

  2. Set the desired opacity by style="opacity:0.7;" (for opacity= 0.7).

  3. Take a snapshot of that image.

  4. Remove that image and insert the snapped image where ever you want.

user_78061030
Related