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 CSS Foundations Backgrounds and Borders Advanced Backgrounds

James Nixon
James Nixon
3,196 Points
Posted by James Nixon
James Nixon
3,196 Points

Check the background values

for some reason I can;t seem to complete this task. I feel like I am doing it correctly but im probably wrong.

```/* Complete the challenge by writing CSS below */

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

3 Answers

Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

James,

Scratch my first reply. I guess I am wrong about multiple images being applied to a single element.

According to this article on CSS tricks: http://css-tricks.com/stacking-order-of-multiple-backgrounds/

Applying more than one image per element will just arrange the elements on the z-index in the order the images are listed in the CSS. Here is code snippet from that article that might help with your issue.

Sorry about the confusion with the first reply, but I did not know of this CSS3 feature.

.sketch{background: 
   url(number.png) 600px 10px no-repeat,  /* On top,    like z-index: 4; */
   url(thingy.png) 10px 10px no-repeat,   /*            like z-index: 3; */
   url(Paper-4.png);                      /* On bottom, like z-index: 1; */
}
Jason Montoya
Jason Montoya
6,550 Points
Jason Montoya
Jason Montoya
6,550 Points

James,

You can only apply one background image per CSS element.

For your scenario to work, you will either have to create more CSS elements, or most likely in your case, just apply one background image instead of the 3 you have, and then you should be fine.

Hope this helps.