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

dan kujaneck
dan kujaneck
8,946 Points

multiple background images

Here is my code: <style> .sketch { background: url('img/pencil.png') no-repeat bottom left, url('img/smiley.png') no-repeat top right, url('img/texture.jpg') no-repeat; } </style>

Why doesn't it work?

4 Answers

Try this:

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

Technically for your method, you would want to put the position before the repeat.

I haven't see the course but in most cases this requires a level to go to. So for instance after pencil.png') you would need to put 600px or some number to allow for the images to stack and or put in different locations or you can try this.

background-image: url(flower.png), url(ball.png), url(grass.png);
background-position: center center, 20% 80%, top left, bottom right;
background-origin: border-box, content-box;
background-repeat: no-repeat;
dan kujaneck
dan kujaneck
8,946 Points

I found some code in the treehouse forum that somebody said worked. I put it in my text editor underneath my code which did not work. I compared my code with the good code and the only difference was that the good code had color info for the texture. Below I show first my code which does not work (the first .sketch...) and somebody's code from the forum which does work (the second .sketch..). I can't see any reason why mine did not work.

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

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

</style>

I think the teamtreehouse quiz engine has a defect.

Sean T. Unwin
Sean T. Unwin
28,690 Points

Regarding your last post, dan kujaneck, the first .sketch has no color at the end while the second example does.The second example is what the challenge is looking for.