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

Posted by Umer Ijaz
Umer Ijaz
512 Points

CSS

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

.contact-info li.phone a { background-image: url('phone.png') }

.contact-info li.mail a { background-image: url('mail.png') }

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

My twitter background image is repeating downwards. What's wrong? Please help! I have thoroughly checked my html. There is no repetition of code. No list items are repeated. What to do?

Inge L
Inge L
30,058 Points

Can you provide a workspace snapshot?

Janis Celms
Janis Celms
44,170 Points

Hey Umer

Since you have stated "background-repeat: no-repeat" for all "a" elements inside ".contact-info" class - its hard to tell why twitter img is repeating while others are not. I would suggest that you use browser's "inspect element" and find what is causing it that way.

Best regards

1 Answer

Luke Towers
Luke Towers
18,572 Points
Luke Towers
Luke Towers
18,572 Points

CSS background images (how you're displaying your image) have several different other properties that affect how the image is displayed.

One of these properties is background-repeat, which is set to repeat the image in both the x-axis and the y-axis by default. In order to change this behaviour so that your image does not repeat, you will need to set the background-repeat property to no-repeat as demoed below:

/* Note, I haven't used a class selector for the li element here because I want the 
background-repeat property to be set to no-repeat for all three of the icons */
.contact-info li a {
    background-repeat: no-repeat;
}

EDIT: Upon closer look, I can see that you're already setting background-repeat in the CSS. Without seeing all of the code, I would suggest you look into the fact that the path to your twitter icon is different than that of the other icons "../twitter.png" as opposed to just "twitter.png", and that you are missing semicolons on all of the background-image property declarations for your icons.