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

Can't see why my Mail and Twitter pictures wont work.

12 Answers

Hi Felix,

Bothxp was right, but take a look at your css file again. It looks like you have "ulr" instead of "url" here. If you change it to "url" it will work properly.

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

I did that but it did not work:

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

Hi Felix,

You still have "ulr". It needs to be "url".

Ahh thank you! I have some problems to see my spelling sometimes.

They are added via css, so we could do with seeing your main.css page.

You'll be looking for the section

.contact-info a {
    display: block;
    min-height: 20px;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    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');
}

Yes I have done that but I can't get it to work.

Hi Felix,

In your screenshot you showed us contact.html and index.html .... but we could really do with seeing the 'Page: Contact section of your main.css file.

Oh sorry that's a miss from me here it is: http://imgur.com/JKPYcnT

ok .. I think you might have missed the 'a' tag in the selector. Try:

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

No it didn't work may be some problem with the direction ?

ult('../img/mail.png')

should that be url not ult

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

Aww that was not the problem either.

I did that but it did not work:

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

you changed it to ulr

It needs to be url