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 Background Properties

Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Posted by Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

Code not accepting

Next, add the image 'mike.png' located inside the 'img' folder to the background. We only want Mike to appear once, so follow it with a property and value that will not repeat the image.

I have added the following css code:

.box { background-image: url('img/mike.png'); }

BUT the task is telling me that the code is wrong.

4 Answers

ixrevo
ixrevo
32,051 Points

Hi Darren,

to make your code valid for this challenge you should add back css declaration block from step 1 of this challenge:

background-color: #387ABC;

and remove background image repetition (We only want Mike to appear once, so follow it with a property and value that will not repeat the image):

background-repeat: no-repeat;

So finally your code should looks like this:

.box {
  background-color: #387ABC;
  background-image: url('img/mike.png');
  background-repeat: no-repeat;
}
Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Hey Darren,

Did you make sure that the background image isn't repeating?

.box {
    background-repeat: no-repeat;
}
Darren Kynaston
PLUS
Darren Kynaston
Courses Plus Student 15,610 Points
Darren Kynaston
Darren Kynaston
Courses Plus Student 15,610 Points

I did keep block 1 of the challenge guys, but I entered the code as follows:

.box { background-color: #387ABC; background-image: url('img/mike.png') no-repeat; }

I take it the background-image: url('img/mike.png') no-repeat; isn't accepted and I have to enter the background-repeat: no-repeat separately then?

Thanks for your replies.

Kevin Kenger
Kevin Kenger
32,834 Points
Kevin Kenger
Kevin Kenger
32,834 Points

Yeah exactly. The background-image property is just for the image itself, so background-repeat is needed as well. You could always just use the background shorthand property, where you can specify the color, the image, and whether it repeats (as well as attachment and position).