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 Matthew Petrucci
Matthew Petrucci
4,100 Points

Advanced Backgrounds Code Challenge

On the CSS Foundations - Second Edition Code Challenge, the scenario is:

"Add the image 'smiley.png' located in the 'img' folder 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."

This fails:

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

This also fails, despite 'previewing' correctly:

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

Am I doing something wrong?

Cheers!

18 Answers

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

Hi Matthew,

You're close. Looks like you just need to swap the "smiley" and "pencil" bg image layers.

Guil

Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points
Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points

I dont know what I was doing wrong. I copied and pasted this in and it somehow worked...

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

Matthew Petrucci
Matthew Petrucci
4,100 Points
Matthew Petrucci
Matthew Petrucci
4,100 Points

Great, it worked!

Thanks for your help, Guil.

Katie Barry Ishibashi
Katie Barry Ishibashi
4,013 Points
Katie Barry Ishibashi
Katie Barry Ishibashi
4,013 Points

Hi all, I'm not sure what's going on - I also have code that fails despite previewing correctly: .sketch { background:url('img/smiley.png') no-repeat top right, url('img/pencil.png') no-repeat bottom left, url('img/texture.jpg') repeat #EED293; background-size:200px, 250px, 110%; } I tried taking each of the code snippets above and switching the pencil and smiley, and this didn't work either. What's going on?

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

HI Katie Barry Ishibashi,

It looks like you need to swap your pencil and smiley background image values. Your background postion values also need to be swapped: "top right" should be "right top" etc...

Hope this helps :)

Katie Barry Ishibashi
Katie Barry Ishibashi
4,013 Points
Katie Barry Ishibashi
Katie Barry Ishibashi
4,013 Points

Hmmm, <code> .sketch { background:url('img/smiley.png') no-repeat bottom left, url('img/pencil.png') no-repeat top right, url('img/texture.jpg') repeat #EED293; } </code> doesn't seem to be working either. I keep getting a message to "Check the background image values in your CSS."

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

Hi Katie Barry Ishibashi,

The pencil image needs to be first in the list of values. Then, instead of "bottom left," you'll need to use "left bottom." The position values also need to be swapped the same way in the smiley image.

Katie Barry Ishibashi
Katie Barry Ishibashi
4,013 Points
Katie Barry Ishibashi
Katie Barry Ishibashi
4,013 Points

Ah, gotcha. Thanks!

L McLean
PLUS
L McLean
Courses Plus Student 5,329 Points
L McLean
L McLean
Courses Plus Student 5,329 Points

Why is this not working? What careless mistake am I making?

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

I have tried everything. Also the Code Challenge Engine is constantly breaking on this problem.

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

Hi L McLean,

You're super close. All you need to do next is remove the spaces between url and ( and you're good-to-go.

L McLean
PLUS
L McLean
Courses Plus Student 5,329 Points
L McLean
L McLean
Courses Plus Student 5,329 Points

Thank you!

Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points
Shawn Katzenmeier
Shawn Katzenmeier
3,624 Points

I am perplexed by this issue. I fully understand it, but for some reason the smiley doesnt show up and it keeps failing me. What am I doing wrong?

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

Chris Sicam
Chris Sicam
4,482 Points
Chris Sicam
Chris Sicam
4,482 Points

Lol this challenge was so simple yet so hard hahaha

Rezyl Pelobello
Rezyl Pelobello
5,535 Points
Rezyl Pelobello
Rezyl Pelobello
5,535 Points

I am also having an issue on this question. Here's my code: .sketch { background: url('img/pencil.png') no-repeat left bottom, url('smiley.png') no-repeat right top, url('img/texture.jpg') #EED293; }

Craig Jamieson
Craig Jamieson
19,585 Points
Craig Jamieson
Craig Jamieson
19,585 Points

You forgot to add the img folder that contains smiley.png

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

Seth Phillips
Seth Phillips
4,859 Points
Seth Phillips
Seth Phillips
4,859 Points

not sure why mine is failing as well:

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

nvrmnd...png not jpg doh.