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

CSS

Posted by Armando Abrahamsson
Armando Abrahamsson
1,391 Points

.png images not showing in contact page

I checked the other same question in the forum like this one, however the answer there didn't help.

here is my css for my contact . png images.

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

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

.contact-info li a{
color:black;

}

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

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


```css

3 Answers

A.b. Martinez
A.b. Martinez
10,460 Points

Hey Armando!

It looks like you've got one too many .'s in your background-image URL paths. When telling the browser to move back one directory the proper syntax would be as follows.

url(../directory/filename.png);

Notice there are only two .'s before /directory.

Also, the single quotes aren't necessary for the URL path. Don't believe it's going to break anything to include them, but will save you a bit of time when coding. :)

Hope this helps!

Armando Abrahamsson
Armando Abrahamsson
1,391 Points
Armando Abrahamsson
Armando Abrahamsson
1,391 Points

I took away the 's but that did not change anything.

A.b. Martinez
A.b. Martinez
10,460 Points

Did you also remove one of the periods in front of /img ? So instead of:

 ('.../img/phone.png');

you would have:

(../img/phone.png);
Armando Abrahamsson
Armando Abrahamsson
1,391 Points
Armando Abrahamsson
Armando Abrahamsson
1,391 Points

Yep that was it!

A.b. Martinez
A.b. Martinez
10,460 Points

Awesome. Happy coding! :)