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

Posted by Karen Rae Arnoco
Karen Rae Arnoco
1,362 Points

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
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
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.

Karen Rae Arnoco
Karen Rae Arnoco
1,362 Points

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.

Falk Schwiefert
Falk Schwiefert
8,706 Points
Falk Schwiefert
Falk Schwiefert
8,706 Points

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

Karen Rae Arnoco
Karen Rae Arnoco
1,362 Points
Karen Rae Arnoco
Karen Rae Arnoco
1,362 Points

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
Mayur Pande
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