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 Becky Pate
Becky Pate
1,667 Points

advanced background image question

Hello

I am attempting to answer the question:

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.

My CSS looks like follows:

http://cdpn.io/iyBkC

I've looked back through the video and can't see what I am doing wrong. The preview in the objective also looks good.

Would appreciate any help.

Thanks Becky

2 Answers

David Lane
David Lane
33,414 Points
David Lane
David Lane
33,414 Points

Looks like the order of your images wasn't correct. It should go pencil, smiley, texture. Try this:

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

I might be missing something here, but order shouldn't matter for rendering this code challenge seems like it has an overly specific correctness test. I'd say it's a possible bug, maybe Guil Hernandez can shed some light on this one.

David Lane
David Lane
33,414 Points
David Lane
David Lane
33,414 Points

The question seemed pretty specific about the order. I took the OP's codepen and placed it in the challenge with only changing the order and it passed no probem.

It might be a bug, but when your layering backgrounds it might be picky for a reason.

Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

You are correct. The layering order matters with multiple backgrounds, as some layers can obscure others. This code challenge is asking for a specific order. :)

cc/ Becky Pate

Adrianne Geyer
Adrianne Geyer
7,180 Points
Adrianne Geyer
Adrianne Geyer
7,180 Points

I used the shorthand method and made sure the url's were lined up one after another. Once the code was properly aligned it finally passed.