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

Challenge Task 1 of 1 quiz checker is broken.

Better have a look at your checker for task 1 of 1. This code works but is not ok with the checker.

.sketch { background: url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-7/smiley.png') no-repeat top right, url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-7/pencil.png') no-repeat bottom left, url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-7/texture.jpg') #d6bb80;

background-size: 100px 100px, 40%, 100%;

}

I can also transpose "bottom right" and "right bottom"

index.html
<!DOCTYPE html>
<html>
<head>
    <title>Multiple Background Images</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="sketch"></div>
</body>
</html>
style.css
/* Complete the challenge by writing CSS below */

.sketch {
    background: 
    url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-7/smiley.png') no-repeat top right,
    url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-7/pencil.png') no-repeat bottom left, 
    url('http://treehouse-code-samples.s3.amazonaws.com/CSS-DD/codepen/stage-7/texture.jpg') #d6bb80;

    background-size: 100px 100px, 40%, 100%;

}
Wayne Priestley
Wayne Priestley
19,567 Points

Hey Alan,

Even if the code works, unless your code is exactly what the challenge is looking for it won't pass.

4 Answers

Alex Heil
Alex Heil
53,534 Points

hey Alan, I just re-did the challenge and the checker worked fine (means my code passed) at my end. however comparing your code to the one I put in, there were 2 differences:

1) I haven't added any external images, not sure where you got them from but the question only told us that images are in the img folder so that's all we have to deal with ;)

2) The order of the background layers (pencil before smiley).

In full the code would look like this:

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

hope that helps and have a nice day ;)

Wayne Priestley
Wayne Priestley
19,567 Points

Hey Alan,

Your file paths for the images are wrong, the challenge says they are located in the img folder.

img/smiley.png

Also your code is wrong regarding the positioning. The answer is in the question.

Hope this helps.

Yeah, the order was wrong. It wasn't obvious since they didn't overlap each other.

Thanks for all the feedback.

Wayne Priestley
Wayne Priestley
19,567 Points

Hey Alan,

Out of curiosity, where did you get the url's you had in your post?

I think the long URL's came from a different segment of this lesson, or another lesson altogether, and I had gotten used to them. They worked in my codePen so I figured they would pass. I think it was the order that was the real problem. Haven't gone back to check it out.