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

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

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;
}

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

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?

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;

Use RGBA on the background background: rgba(255, 255, 255, 0.3);