Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Erick Amezcua
Erick Amezcua
17,171 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.