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 Miguel Palau
Miguel Palau
24,176 Points

Background with color overlay with opacity in CSS

After doing the CSS Basics course I wanted to create a CSS image background with an rgba black color with 0.5 opacity on top of it but I was not able to display properly.

What I ended up doing was making a linear gradient on top of it going from rgba (0,0,0,0.5) to rgba(0,0,0,0.5)

Why can't this be done in a straightforward way??

Here's my example:

http://solohaz.click/valores/

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

Hi Miguel, would you be able to post us some code along with your link? I don't understand either why you can't just do a simple rgba on a background property :-)

1 Answer

Miguel Palau
Miguel Palau
24,176 Points

Sure thing:

<div class="wrapper">Stuff goes in here</div>

.wrapper {
    background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.55)),
                rgba(0,0,0,0.55) url('../img/lealtad.jpg') no-repeat center;
    background-size: cover;
    color: #fff;
    text-align: center;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 15px 10px 15px;
    min-height: 640px;
}

If anyone knows how to make the div also window height for a nice display experience that would be great!