Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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:

I missed the semicolon. :)

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.

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

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.

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

I passed! Thanks for all your thoughtful comments.

Way to go !!!