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

Erick Amezcua
Erick Amezcua
21,826 Points

Multiple backgrounds issue (images and colors)

Hello, I have a problem with my CSS document, I want to create a semi-black color (with rgba) and then put an image, but I can't get it, and I don't know why doesn't work.

Heres the section:

.perfil{
  background: rgba(0, 0, 0, 0.5), 
                        url("../img/sepia_cat.jpeg") no-repeat center;
  background-size: cover;
}

Notice that they work separately, the background color is correct and the URL is correct.

Also I have this in the same CSS document, which works perfectly:

.main-header{
  background: linear-gradient(0deg,#000 10%, transparent 90%),
                        url("../img/background.jpg") no-repeat center;
  background-size: cover;
}
Brandon Benefield
Brandon Benefield
7,739 Points

Whenever I have one piece of code that works and another that is very similar, I always copy the working section into the the one that is not working. Have you tried doing that?

Also something to note is that whenever you try to give a div a background image, said div either needs to have something populating the foreground of that div, such as text, forms, buttons etc. Does your .perfil div have anything in the foreground? If it does not, you need to specify a height so that div can be properly rendered.

You should edit your question and add your HTML.