Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

David McEnnerney
seal-mask
.a{fill-rule:evenodd;}techdegree
David McEnnerney
Front End Web Development Techdegree Student 2,377 Points
Posted by David McEnnerney
.a{fill-rule:evenodd;}techdegree
David McEnnerney
Front End Web Development Techdegree Student 2,377 Points

Background-image opacity??

So does anyone know if it is possible to change the opacity of a background-image property without affecting the text also ?

4 Answers

Thomas Yu
Thomas Yu
10,892 Points
Thomas Yu
Thomas Yu
10,892 Points

I came across same issue and I tried this workaround method. You control "opacity" by changing RGBA alpha channel (The last value with decimal number) to control how light or dark your image going to be. Also you can change "opacity" color (color cast) as well by using different RGB values. Hope this helps!

.image {
    background-image: url('your-image.jpg');
    background-color: rgba(255, 255, 255, 0.4);
    background-blend-mode: lighten;
}
Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points
Cindy Lea
Cindy Lea
Courses Plus Student 6,497 Points

I found an example that says you can do this & gives an example:

img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ }

http://www.w3schools.com/css/css_image_transparency.asp

Its good to know...

David McEnnerney
seal-mask
.a{fill-rule:evenodd;}techdegree
David McEnnerney
Front End Web Development Techdegree Student 2,377 Points
David McEnnerney
.a{fill-rule:evenodd;}techdegree
David McEnnerney
Front End Web Development Techdegree Student 2,377 Points

Hi Cindy, Thanks for your answer, but my problem is slightly different! I understand that you can change the opacity of an image but i can't seem to do do it when the img is set as a 'background-image' in the css?

Jonathan Selwall
Jonathan Selwall
12,528 Points
Jonathan Selwall
Jonathan Selwall
12,528 Points

Hey! There is no css property for changing the opacity of the background-image. You can achive this in alot of different ways but here's two approaches:

div::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;   
  width: 100%;
  height: 100%;
  background-image: url('yourimage.jpg');
  background-size: cover;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

Or you can apply similar styles to a child div instead of a psuedo element, like this:

<div class="hero-unit">
  <div class="hero-unit__background-image">
  </div>
</div>

.hero-unit__background-image {
  position: absolute;
  z-index: -1;   
  width: 100%;
  height: 100%;
  background-image: url('yourimage.jpg');
  background-size: cover;
  opacity: 0.7;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

And always make sure the parent element has position: relative;