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

Posted by James Barrett
James Barrett
13,253 Points

Help with a CSS image overlay?

I am struggling with applying a colour overlay using CSS. I have this code:

.work-intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: rgba(39,62,84,0.82);
    background: url(../img/work-bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

How would I add a black overlay to it so my white header text can come through easier; without affecting the CSS cascade?

Thanks, James.

3 Answers

Luke Pettway
Luke Pettway
16,593 Points
Luke Pettway
Luke Pettway
16,593 Points

Are you doing the overlay using the .work-intro-header? I see you have an rgba color for the background which I am guessing is what the overlay is. Since the next attribute is background again, it is cascading over that color, which I think you already realized.

I did something similar on my site with my articles http://lukepettway.name/ but what I did was I used a :before selector which I set to position absolute and width/height 100% over top of it. The header for mine is an inline background image because I am using the WordPress featured image. 

.home .post header {
    background: #607D8B;
    position: relative;
    height: 150px;
}

.home .post header:before {
    background: #607D8B;
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.6;
}
peyton caseria
peyton caseria
Courses Plus Student 12,281 Points

Nice looking website Luke. I guess you guys have this thread on lock down.

Falk Schwiefert
Falk Schwiefert
8,706 Points
Falk Schwiefert
Falk Schwiefert
8,706 Points

And make the position: absolute so you remove it from the flow and it actually becomes an overlay.

Shaun Moore
Shaun Moore
6,301 Points
Shaun Moore
Shaun Moore
6,301 Points 
.work-intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background: rgba(39,62,84,0.82);
    background: url(../img/work-bg.jpg) no-repeat center center fixed;
    background-size: cover;
}

I think this is the answer you're looking for:

.work-intro-header {
    padding-top: 50px;
    padding-bottom: 50px;
    text-align: center;
    color: #f8f8f8;
    background-color: rgba(39,62,84,0.82);
    background: url(../img/work-bg.jpg) no-repeat center center fixed;
    background-size: cover;
}