Background image transparency in DIV [duplicate]

Question

I'm trying to make a background image transparent (no option to make a transparent PNG or lighter image, the images are changed often).

background: url(image.jpg) no-repeat center center / cover;
opacity: 0.2;

Got the image is working, but everything inside the DIV is transparent too. I've searched for a solution, but can't seem to implement the right one. Any pointer on how to fix that?

Answer 1

You can use CSS linear-gradient() with rgba().

div {
  width: 300px;
  height: 200px;
  background: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)), url("https://i.imgur.com/xnh5x47.jpg");
}
span {
  background: black;
  color: white;
}

<div><span>Hello world.</span></div>

jsFiddle

Explanation:

• The first part: linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,.5)) creates a semi-transparent white background color. You can change the alpha parameter as needed between 0 (fully transparent) and 1 (fully opaque).

• The second part: url("https://i.imgur.com/xnh5x47.jpg") is to display the actual background image.

• Together: background: linear-gradient(...), url(...); creates multiple backgrounds, two of them are stacked, the first one covers the second.

Answer 2

Use opacity on the background div inside of the wrapper element.

.page {
  position: relative;
  width: 100px;
  height: 100px;
}
.page::before {
  content: '';
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  background:  url('http://www.visitnorwich.co.uk/assets/Uploads/Events-images/Theatre-generic.jpg');
  opacity: 0.2;
  z-index: -1;
}
.box {
  display: inline;
  background: red;
}

<div class="page">
  My page
  <div class="box">Red box</div>
</div>