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

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

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

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

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