CSS opacity target background image only?

Question

I have this CSS

.jumbotron {
  background: url('/background.svg');
  opacity: 0.5;
}

but I want the opacity to target the background image only. At the moment it targets the whole jumbotron so the fonts etc. are also faded.

I've tried

.jumbotron {
  background: url('/background.svg');
  background: opacity: 0.5;
}

and

.jumbotron {
  background: url('/background.svg');
}
.jumbotron:img {
  opacity: 0.5;
}

but neither work.

See this http://stackoverflow.com/questions/4183948/css-set-background-image-with-opacity and http://stackoverflow.com/questions/4997493/set-opacity-of-background-image-without-affecting-child-elements — Sandeep Nayak, Oct 01 '15 at 12:03
You need to set the background as pseudo element ( `:before` / `:after`) and use opacity on this pseudo element only - Note, you can set a `z-index:-1;` to this pseudo element — Luís P. A., Oct 01 '15 at 12:04
Sorry I don't understand. What gets :before or :after? ... My current code is the 1st example, what do I need to do? — Jack, Oct 01 '15 at 12:06

Wavemaster · Answer 1 · 2015-10-05T08:17:46.333

0

From CSS-tricks.com:

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

.jumbotron::after {
  content: "";
  background: url(/background.svg);
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
}

As isherwood mentioned in the comments, maybe you have to set your

.jumbotron {
  position: relative;
}

edited Oct 05 '15 at 08:17

answered Oct 01 '15 at 12:03

Wavemaster

1,794
16
27

@Wavemaster that causes the whole page to have a background of background.svg, not the jumbotron – Jack Oct 02 '15 at 08:52
1

You may need to do `.jumbotron {position: relative}` first. – isherwood Oct 02 '15 at 14:13

score -1 · Answer 2 · answered Oct 01 '15 at 12:11

-1

Set opacity:1 for anoter element in jumbotron like font etc.

answered Oct 01 '15 at 12:11

Bheem Nishad

19
7

That won't work, because the general opacity is already set to 0.5. – Wavemaster Oct 01 '15 at 12:14

CSS opacity target background image only?

2 Answers2