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

Posted by Alan Millar
Alan Millar
1,396 Points

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,579 Points
Wayne Priestley
Wayne Priestley
19,579 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,547 Points
Alex Heil
Alex Heil
53,547 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,579 Points
Wayne Priestley
Wayne Priestley
19,579 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.

Alan Millar
Alan Millar
1,396 Points
Alan Millar
Alan Millar
1,396 Points

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,579 Points
Wayne Priestley
Wayne Priestley
19,579 Points

Hey Alan,

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

Alan Millar
Alan Millar
1,396 Points
Alan Millar
Alan Millar
1,396 Points

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.