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

background-repeat code not working

I added background-repeat: no-repeat; to class id contact-info but the phone and mail icons is appearing twice. twitter appears only once. How do I fix this?

Tiffany McAllister
Tiffany McAllister
25,806 Points

Can you please provide us with your HTML and CSS code? This will help in determining what is going wrong.

Check out the Markdown Cheatsheet at the bottom of the page to properly format the code :)

4 Answers

M. Cotter
M. Cotter
6,179 Points

Hi Karen,

After reviewing your HTML code using Inspect Element, it looks to me like you have some extra anchor elements within both your Phone and Mail list elements. Please double-check your HTML code. I believe it looks like this:

<ul class="contact-info">
   <li class="phone">
      <a href="tel:63-32-4224048">Phone: 4224048</a>
      <a></a>
   </li>
   <li class="mail">
      <a href="mailto:sample@gmail.com"></a>
      <a href="mailto:sample@gmail.com">sample@gmail.com</a>
   </li>
   <li class="twitter">
      <a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a>
   </li>
</ul>

You need to REMOVE those duplicate <a> elements from the Phone and Mail <li> elements... (continued below)

<ul class="contact-info">
   <li class="phone">
      <a href="tel:63-32-4224048">Phone: 4224048</a>
      <a></a> [REMOVE]
   </li>
   <li class="mail">
      <a href="mailto:sample@gmail.com"></a> [REMOVE]
      <a href="mailto:sample@gmail.com">sample@gmail.com</a>
   </li>
   <li class="twitter">
      <a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a>
   </li>
</ul>

... so that it looks like this:

<ul class="contact-info">
   <li class="phone">
      <a href="tel:63-32-4224048">Phone: 4224048</a>
   </li>
   <li class="mail">
      <a href="mailto:sample@gmail.com">sample@gmail.com</a>
   </li>
   <li class="twitter">
      <a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a>
   </li>
</ul>

If this solution helps solve your problem, please select my response as the Best Answer! :) If not, please let me know what happens when you follow my instructions, and I'll do my best to help sort it out.

Best,

M.

Thanks so much. It's really weird though because I don't see any duplicate at all in the html code. What I did is --I typed it again on a notepad and paste it on the workspace and it worked.

.contact-info li.phone a - make sure you have the ! a ! at the end. Otherwise it won't work.

HTML: <ul class="contact-info"> <li class="phone"><a href="tel:63-32-4224048">Phone: 4224048<a/></li> <li class="mail"><a href="mailto:sample@gmail.com">sample@gmail.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=SaturatedBrain">@SaturatedBrain</a></li> </ul>

CSS:

/************************* PAGE CONTACT **************************/ .contact-info { list-style: none; padding: 0; margin: 0; font-size: 0.9em; }

.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 a { background-image: url('../img/phone.png'); }

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

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

thanks!

Mayur Pande
PLUS
Mayur Pande
Courses Plus Student 11,711 Points

Hi I seem to be getting the same problem. Which code did you re-write in the notepad? As I have tried a few options but the images are still repeating.

Thanks