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!

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

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Posted by Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Black transparent overlay on Cover image.

Hi everyone,

Can someone please tell me how do I add a black-transparent overlay on the cover image of my practice-website.

Here is a screenshot of what it looks at the moment: http://d.pr/i/1byqB .

I would like to add a black transparent layer on top of the current cover image to make a better contrast between headings and cover image.

Here is my current css:

.above-the-fold { width: 100%; height: 400px; margin-top: 0; padding-top: 0; background: url('../img/daf-truck.jpg') no-repeat center; background-size: cover; }

Thank you very much in advance.

Stig Bratvold
Stig Bratvold
4,120 Points
Stig Bratvold
Stig Bratvold
4,120 Points

Instead of putting a black overlay on top you could also consider giving the div containing the img a background-color of black and then give the img an opacity 0.5 or anything else you want. That will make you see the black behind. That is what we did at this website. http://www.spetakkel.org/

So the html would be:

            <div class="img-container"><img src="thisisyourimage.jpg"></div>
            ```
…and the css would be:
```css
            .img-container { background-color: #000000; }
            .img-container img { opacity: 0.5; }
            ```

5 Answers

Pete Cass
Pete Cass
16,656 Points

Hey,

The easiest way of doing this is to actually lay a gradient over the top of the image. using code like this

.css_selector {
background: linear-gradient(
                     rgba(20,20,20, .5), 
                     rgba(20,20,20, .5));
}

you could put any color in the gradient. using the rgba you can set the alpha (last unit inside the parenthesis) to any decimal value between 0 and 1. IE if this is too dark change both to .3 if too light change to .8.

hope this helps.

Pete Cass
Pete Cass
16,656 Points

also just make sure you put linear-gradient above the url of the image like this

.css_selector {
background: linear-gradient(
                     rgba(20,20,20, .5), 
                     rgba(20,20,20, .5)),
                     url( your image);
}
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Pete Cass

Thanks Pete! This is exactly what I was looking for! I knew that there must be an easy way of doing it and you just showed exactly what I though ;)

Thanks for your help!

Gregori Benji Ootes Gonzalez
Gregori Benji Ootes Gonzalez
969 Points
Gregori Benji Ootes Gonzalez
Gregori Benji Ootes Gonzalez
969 Points

What am i doing wrong i do not see my image :

.jumbotron{
                  background: linear-gradient 
                  (rgba(20, 20, 20, .5),
                   rgba(20, 20, 20, .5)),  
                  url("images/headerbg.jpg");
}
Casper Rasmussen
Casper Rasmussen
4,478 Points

Put the "rgba" before the ( on your first RGBA line ...

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Hi Stig,

First of all, thank you very much for your feedback. Stig, I've tried to do as you mentioned, however I ended up having something strange: http://d.pr/i/1jNMQ .

By adjusting my html to this:

<div class="above-the-fold"> <img src="img/daf-truck.jpg"> <h1>Грузоперевозки в любую точку России</h1> <h2>Рассчет сметы менее чем за 24 часа</h2> </div>

I ended up having a huge image on top of my heading. I guess I can resize this image using css, but how do I get the main heading and subheading to appear on top of this image?

Here is my current css for this part: http://d.pr/i/1jqiq

Any further suggestion?

Stig Bratvold
Stig Bratvold
4,120 Points
Stig Bratvold
Stig Bratvold
4,120 Points

Not sure if I fully understand the question. Did you get the actual "overlay" effect? Not sure what else you changed. The image from the screenshot with the clouds seems oversized. Is that true? Have you given the img width: 100%; and height: auto;?

Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Stig Bratvold I've tried to follow your instructions, however I ended up having an image on top of my heading and subheading which has also been sized inappropriately (i.e. the height of the image has been sized to fit in the whole image with the given width (100%). When I used background-size: cover; – it fill the image according to the given dimensions (height and width).

I will try to play around one more time with your solution, but so far I haven't been able to replicate my idea :)

Thanks for the help though.

Aleksandrs Karevs
PLUS
Aleksandrs Karevs
Courses Plus Student 11,178 Points
Aleksandrs Karevs
Aleksandrs Karevs
Courses Plus Student 11,178 Points

Nick Pettit

Is there a way of adding a half transparent black layer on top of the image, which is used as a background?

Here is a a reference to the css code I have written so far: http://d.pr/i/19HlQ

Thank you very much in advance.

Arturo Bautista
PLUS
Arturo Bautista
Courses Plus Student 1,290 Points
Arturo Bautista
Arturo Bautista
Courses Plus Student 1,290 Points

Great, I found this and it's what I was looking for. :D