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 Laura Knapp
Laura Knapp
5,349 Points

Web design Challenge 1 of 1 in background images

I have been struggling on Challenge task 1 of 1 on Web Design for the last twenty minutes. It was very FRUSTRATING!!! Your instruction is very confusing.

I keep looking back at the video for clarification, but am still stumped.

Here's your challenge 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 code below is not perfect enough for the Tree House team :-(

Thanks for all your help.

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

7 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Hi Laura, it's wanting pencil.png above the smiley image layer.

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

EDIT: As Jason has said, you need the proper file linkage, and also a semicolon at the very end. :smiley:

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I missed the semicolon. :)

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Laura,

The 1st background image is the top layer and the last background image is the lowest layer. The instruction are saying the pencil image should be above the smiley image so you would need to put that one first. Also, you're missing the "img" sub-folder on the smiley image.

Laura Knapp
Laura Knapp
5,349 Points
Laura Knapp
Laura Knapp
5,349 Points

What an idiot I am! Thank you, thank you gentlemen for helping me understand the Tree House directions and coding system.

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Hi Laura I know how frustrating it can be and has been for me even recently. If I am reading the question correctly the first problem that I see is placement. Your smiley image should be above the texture background but below the pancil layer which means that the image that you are placing should be in between the other images.

If I were inserting an image say of a swan my html woul look like.

<img src ="swan.gif" alt="Swan">

When you are using an image for the URL you need to use the absolute path. If this does not help you plz send a link to the video here so I can help you further.

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Your not an idiot this happens to all of us ;)

Laura Knapp
Laura Knapp
5,349 Points
Laura Knapp
Laura Knapp
5,349 Points

I passed! Thanks for all your thoughtful comments.

Peaches Stubbs
Peaches Stubbs
21,320 Points
Peaches Stubbs
Peaches Stubbs
21,320 Points

Way to go !!!