Search code examples
cssbackground-imagetransparency

Background image transparency in DIV

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?

Solution

  • 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>