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

HTML How to Make a Website Adding Pages to a Website Add Iconography

Reginald Beneke
PLUS
Reginald Beneke
Courses Plus Student 4,282 Points
Posted by Reginald Beneke
Reginald Beneke
Courses Plus Student 4,282 Points

CSS {Background-repeat:no-repeat;} Not working. The images still repeat.

What am I doing wrong and how can I fix this?

Here's the code.

.contact-info a{ display:block; min-height:20px; background-repeat: no-repeat; background-size: 20px 20px; padding: 0 0 0 30px; margin: 0 0 10px; }

.contact-info li.phone{ background-image:url("../img/photo.png") }

.contact-info li.mail{ background-image:url("../img/mail.png") }

.contact-info li.twitter{ background-image:url("../img/twitter.png") }

6 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

Hi Reginald,

There is a semi-colon within the round brackets of background-image:url(). The semi-colon needs to be the last character after the property value.

This typo is within all 3 instances of the .contact-info listings.

e.g. 

/* Currently */
.contact-info li.phone a {
background-image:url("../img/phone.png"; ) /* <-- semi-colon needs to be outside the brackets */
}

/* Change To */
.contact-info li.phone a {
background-image:url("../img/phone.png");
}

Easy to make typo, yet sometimes hard to find without a second set of eyes. :-)

Raphaël Seguin
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Raphaël Seguin
Full Stack JavaScript Techdegree Graduate 29,228 Points
Raphaël Seguin
.a{fill-rule:evenodd;}techdegree seal-36
Raphaël Seguin
Full Stack JavaScript Techdegree Graduate 29,228 Points

Hi, ensure the property is effectively overriding the user agent stylesheet by selecting the element in chrome dev tool (command + alt + i) and reading the css properties in the right column. Hope it helps,

cheers

Reginald Beneke
PLUS
Reginald Beneke
Courses Plus Student 4,282 Points
Reginald Beneke
Reginald Beneke
Courses Plus Student 4,282 Points

I done that. Now I see the images aren't even showing in the webpage. I quadruple checked and the syntax is correct. So I'm not sure how I can fix this?

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

If you have a Workspace for this project, would you mind taking a snapshot and posting the link so we can take a better look, please.

Reginald Beneke
PLUS
Reginald Beneke
Courses Plus Student 4,282 Points
Reginald Beneke
Reginald Beneke
Courses Plus Student 4,282 Points

Oh my God! LOL I can't believe I didn't see that! I double checked everything at least twice! LOL the funniest thing is,I have a second pair of eyes, my glasses! Wow,thank you so much!!!! I was stuck on this too long!

Thank you so much Sean, once again!

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

My pleasure.

Good luck and happy coding! :-D