Background image transparency in DIV

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?

set for `container: background-color: rgba(0,0,0,0.5);` and clear opacity — Khoshtarkib, Jan 15 '17 at 15:04

Stickers · Answer 1 · 2017-01-16T03:21:37.273

16

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.

edited Jan 16 '17 at 03:21

answered Jan 15 '17 at 15:24

Stickers

75,527
23
147
186

Doesn't that just make the white above the image transparent ? – Ced Jan 15 '17 at 16:04
Does this put more, or less stress on the browser rendering? – Jan Teunis Jan 15 '17 at 19:23
@JanTeunis I don't think anything will be noticeable, as it's pretty standard CSS3 stuff, you can do some tests if you want. Learn more about it on [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds). – Stickers Jan 16 '17 at 02:27
@Ced That's correct, but it's actually white with some transparency, and it's exactly what the question is asking for, of course you can change it to a dark color as needed. – Stickers Jan 16 '17 at 02:29
Who knows what OP has behind his image, it might not be plain blank (it could be another image). It's useful in any case I agree and instructive nonetheless. Upvoted – Ced Jan 16 '17 at 03:11

score 7 · Accepted Answer · answered Jan 15 '17 at 15:05

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>

Had to use `z-index: -0;` to make it work... but it did the job! Thanks. — Jan Teunis, Jan 15 '17 at 17:33

Ced · Answer 3 · 2017-01-15T16:10:32.630

1

You can use a pseudo elem

    div {
      width: 300px;
      height: 200px;
      color: green;
      position: relative;
    }

    div:before{
        background: url(https://i.imgur.com/xnh5x47.jpg);
        content: "";
        z-index: -1;
        position: absolute;
        opacity: 0.5;
        top: 0; bottom: 0; left: 0; right: 0;
        background-size: cover;
     }

<div> LOLOLOL </div>

edited Jan 15 '17 at 16:10

answered Jan 15 '17 at 15:54

Ced

15,847
14
87
146

Had to use `z-index: -0;` to make it work... but it did the job! Thanks. – Jan Teunis Jan 15 '17 at 17:33

Background image transparency in DIV

3 Answers3