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
Rasmus Boll
4,371 Pointscss 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>
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
Courses Plus Student 10,363 Pointsit 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
4,371 PointsIt is super weird, but that actually worked!!
Thank you so much Bartlomiej Zabielski
Rasmus Boll
4,371 PointsBartlomiej 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
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
4,371 PointsI 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.
Bartlomiej Zabielski
Courses Plus Student 10,363 PointsBartlomiej Zabielski
Courses Plus Student 10,363 PointsEDIT:
.contact-info li.phone a { background-image: url('../img/phone.png'); }
Did it work? (: