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

Rasmus Boll
Rasmus Boll
4,371 Points

css says "image not found"

Hi there,

So I´am trying to get some icons on my contact list, but my css are saying "image not found" I have written the same code as Nick, but with some different images, the weird thing is that my linkedin image, is the same as the one in my footer (That works perfectly!) Every thing works, but just not my images/icons on my contact page, and I can´t seem to find out what is wrong.. This is my css code:

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

And this is my HTML code:

    <h3>Contact details</h3>
    <ul class="contact_info">
        <li class="phone"><a href="tel:22531455">22531455</a></li>
        <li class="mail"><a href="mailto:rasmushjortboll@gmail.com">rasmushjortboll@gmail.com</a></li> 
        <li class="linkedin"><a href="https://www.linkedin.com/in/rasmus-boll-5036b2b1/">Linkedin profile</a></li>
        </ul>
    </section>
Bartlomiej Zabielski
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

EDIT:

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

Did it work? (:

Crescens Kob
Crescens Kob
19,946 Points

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

join the li with the class, and by the way check if your pics are jpg or png ...

3 Answers

Bartlomiej Zabielski
PLUS
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

it has to be something silly like a typo or file path error.

i would just retype it .contact_info li.phone a { background_image: url('../img/phone.png'); }

make Quotation marks "" or '' semicolon ; retype the class names and tripple check file path from the file you are saving in so if its in .css in css folder ../img/blabla copy paste the picture name to make sure no typo

surely that will fix it

Rasmus Boll
Rasmus Boll
4,371 Points

It is super weird, but that actually worked!!

Thank you so much Bartlomiej Zabielski

Rasmus Boll
Rasmus Boll
4,371 Points

Bartlomiej Zabielski I´am aware that Nick wrote "-" and not "_" that is just something I use :) so that is not the problem.

Crescens Kob Joining the li with the class, did´t do anything, also my images are png

Bartlomiej Zabielski
PLUS
Bartlomiej Zabielski
Courses Plus Student 10,363 Points

@rasmus I forgot to remove the - from my codepen, I meant to just change the li.phone

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

where is your contact.html file and .png? Do you have your html files outside the img folder are your images inside same folder?

maybe the url path is the problem double check where the images are in relation to the .CSS file. same directory path? inside img folder or outside things like that.

Rasmus Boll
Rasmus Boll
4,371 Points

I have a folder called "web" inside that folder is my: -index.html -contact.html -about.html -stylesheet.css

  • img (folder for my images)

In the folder "img" are all my images, I can not see if the path should be wrong, since some of my images are going to my index.html and my about.html plus inside the img folder, there are two images that are placed on my footer on every of my pages, and that is working perfectly.