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 Dean McCullough
Dean McCullough
8,311 Points

background image problem

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

does not work for me. It is driving this html code:

<ul class="contact-info"></ul>
                <li class="phone"><a href="tel:555-9859">555-9859<a/></li>.

I have tried everything I know to do.

My folder structure is:

Desktop/html/img and desktop/html/css

All of my other image display code is working. I looked at other posts with answers to thie question, but none works. Thanks.

3 Answers

Hugo Paz
Hugo Paz
15,622 Points
Hugo Paz
Hugo Paz
15,622 Points

Do you want the image to appear next to the phone?

You can do this

.contact-info li{
  display: block;
  min-height: 20px;
  background-repeat: no-repeat;
  background-size: 20px 20px;
  padding: 0 0 0 30px;
  margin: 0 0 10px;
  background-image: url('img/phone.png');  
}

Your HTML has an error, you have the li outside the ul, it should look like this:

 <ul class="contact-info">
         <li class="phone"><a href="tel:555-9859">555-9859<a/></li>
</ul>
Dean McCullough
Dean McCullough
8,311 Points
Dean McCullough
Dean McCullough
8,311 Points

Thanks sir! I had a double </ul> in my code.

Kevin Tran
Kevin Tran
980 Points
Kevin Tran
Kevin Tran
980 Points

Howdy, I'm having a similar issue where the images are not appearing.

My css code is:

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

.contact-info li.phone a { <!--goes to class contact-info then to list item with the class phone and then selecting anchor element--> background-image: url('../img/phone.png'); <!-- path to image-->

}

.contact-info li.mail a { <!--goes to class contact-info then to list item with the class mail and then selecting the anchor element--> background-image: url('../img/mail.png'); <!-- path to image-->

}

The html code is:

  <section>       
    <h3>Contact Details</h3>   
    <ul class="contact-info">
      <li class="phone"><a href="tel:555-3902">555-3902</a></li> 

      <li class="mail"><a href="mailto:trank.kevin@gmail.com">trank.kevin@gmail.com</a></li>

    </ul>
  </section>

I'm wracking my brain and I can't determine why it isn't appearing :(