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

Thomas Coler
Thomas Coler
8,068 Points
Posted by Thomas Coler
Thomas Coler
8,068 Points

Advanced Backgrounds

I am stuck on the code challenge for Stage 7 of CSS Deep Dive, Backgrounds and Borders- the second to last code challenge called Advanced Backgrounds. 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.png') no-repeat right top, 
url('img/pencil.png') no-repeat left bottom, 
url('img/texture.png') #EED293;
}

The line breaks I added here to make it readable. I just put spaces after the commas.

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

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

I didn't make the texture .png. I made it .jpg as it was in the original code. Typo.

2 Answers

Jonathan Mundy
Jonathan Mundy
9,780 Points
Jonathan Mundy
Jonathan Mundy
9,780 Points

Hi Thomas,

The challenge asks for the 'pencil/png' image to be above the 'smiley.png' image layer. The 'pencil.png' image must come first for it to be on top. Try swapping the pencil and smiley images over in your declaration and see if that works.

Jonathan

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; }"