Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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

Contact icons: Cannot fix background repeat

I am following everything letter by letter but for some reason my contact icons won't go off background repeat. Background-repeat:no-repeat has absolutely no affect on the icons. I cannot figure out what is wrong as it is exactly the same as the demo. I am even using the same icons.

4 Answers

Nathan Heffley
Nathan Heffley
19,878 Points

I noticed while copying your code in an attempt to test it out that in your first CSS rule for .contact-info where you set the font-size, you set it to 0,9em

You used a comma where you need to use a decimal point so it should be 0.9em

You also appear to have a space in your .contact-info a rule, where the background-size has "20 px" in it, where of course there shouldn't be a space.

NOTICE! REAL SOLUTION HERE!

So I messed around with the code and figured out the problem!

You should be applying the background images to the "a" elements. Right now your code for adding the background images looks like this:

.contact-info li.phone {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

.contact-info li.mail {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

But you want the background image to be applied to the a element inside of those list elements, so you just need to add a reference to the a element, like this:

.contact-info li.phone a {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

.contact-info li.mail a {
  background-image: url("https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRpBIT06IPKde-ptaFPKKwv9MUyulLoDmTfuPXogQdUmMjouYxV6A");
}

Then the images will appear perfectly on your site :D

Simon Duchaine
Simon Duchaine
14,441 Points

Can you paste your code please (html and CSS)? It will help to find your issue.

I have posted the code below, please let me know if you see any errors

Here is the HTML. It seems as though my footer icon is also ignoring my css now. Not sure why. It is not resizing to 20px, staying default.

<!--Contact info-->

<!--first column--> <section> <h3>General information</h3> <p>If you have any inquiries about advertising in Horse Mag or need some design work done, please do not hesitate to contact us!</p> <p>If you have any enquiries about advertising in Horse Mag or need some design work done, please do not hesitate to contact us!</p> </section> <!--second column--> <section> <h3>Contact Details</h3> <ul class="contact-info"> <li class="phone"><a href="tel:083-000000">083-000000</a></li> <li class="mail"><a href="mailto:kathleen@mail.co.za">kathleen@mail.co.za</a></li>

</ul>
</section>

<footer> <a href="http://facebook.com/myhorsemag/"><img src="img/facebook-wrap.png" alt="facebook logo" class="social-icon"></a> <a href="contact.html"><img src="img/mail.png" alt="contact icon" class="social-icon"></a> <p>© 2016 Horse Mag Design.</p> </footer>

CSS

/************************** PAGE: CONTACT **************************/

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

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

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

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