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 Thomas Coler
Thomas Coler
8,068 Points

Stage 7 of CSS Deep Dive, Backgrounds and Borders

I am stuck on the code challenge for Stage 7 of CSS Deep Dive, Backgrounds and Borders. The part I am stuck on...

"We have an image file, 'smiley.png', located in the 'img' folder. Add it as an image above the texture background. Set it so that it doesn't repeat, and position it in the top-right corner of the div. Then, add 'img/pencil.png' above the smiley image layer. Set it so that it doesn't repeat, and position it in the bottom-left corner."

Here is the code I entered and it is not working...

.sketch {
    background: url('img/smiley.jpg') no-repeat right top, 
url('img/pencil.jpg') no-repeat left bottom, 
url('img/texture.jpg') #EED293;
}

Does anyone know what is wrong with my code? Thanks, Tom

Thomas Coler
Thomas Coler
8,068 Points

The line breaks are so I can fit this on the comment page. They are not in my code, just spaces after commas.

Thomas Coler
Thomas Coler
8,068 Points
Thomas Coler
Thomas Coler
8,068 Points

You are right! I copied the image path from the texture image and forgot to change the file endings. Thanks!

Thomas Coler
Thomas Coler
8,068 Points

This is the second to last challenge in stage 7 called Advanced Backgrounds.

4 Answers

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

Make sure that in your background url properties, you are referencing the correct file paths. Here is a hint: Are all of the images JPEG files?

Thomas Coler
Thomas Coler
8,068 Points
Thomas Coler
Thomas Coler
8,068 Points

"Constantin Campean 5,358 I found the problem: i reversed the values in the declaration. So instead of CSS .sketch { background: url('img/smiley.png') no-repeat top right, url('img/pencil.png') no-repeat bottom left, url('img/texture.jpg') #EED293; } it should be CSS .sketch { background: url('img/pencil.png') no-repeat left bottom, url('img/smiley.png') no-repeat right top, url('img/texture.jpg') #EED293; }"

Thomas Coler
Thomas Coler
8,068 Points
Thomas Coler
Thomas Coler
8,068 Points

It is still not working. I changed the first two images to .png and it denied me. Any ideas?

Richmond Lauman
Richmond Lauman
28,793 Points
Richmond Lauman
Richmond Lauman
28,793 Points

I see the problem. The task asks specifically that the pencil image be positioned "above" the smiley image. Therefore you just need to re-position the two url properties for the pencil and smiley face in a way that positions the pencil above the smiley face and background texture. In the preview the results will look the same whether the pencil url is coded first or second because of how the pencil and smiley face are transparent, non repeating and positioned in opposite corners, but I guess they are making sure you understand the order of the properties could be important. Just have the url property for the pencil come first instead of second.