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
Klemen Horjak
4,737 PointsCould we use element <img src="..."> in .html for phone, mail and twitter images instead in .css?
Instead we decided to use images in .css as background-image...
Could we use this code in our contact.html for images?
example:
<li class="mail"><a href="mailto:info@example.si"><img src="../img/mail.png" alt="mail image">info@example.si</a></li>
My question is why did we used background-image in .css?
David McNeill
44,438 PointsDavid McNeill
44,438 PointsHi Klemen,
It's a good question! Both options are valid, but for me it comes down to a couple of things...
Semantic markup - i.e. is the image part of the content or the design? There is a difference. Images added to or changed on a site regularly would be considered content (they have meaning, context and require an alt attribute). Icons, like in this case, are used more as markers in the design and tend not to change often, if at all. In this case a background image is fine as it requires nothing more than a URL path and some sizing properties.
Performance - generally speaking, CSS background images are faster to load and come with the ability to use CSS transitions for creating cool effects. They are also more flexible when it comes to responsive resizing.
So in the end, both are possible options but you'll find that most front-end developers will do what Nick did in this video and use CSS background images for these small icons and sprites, and <img> elements for larger complex images in the website content.
Hope this helps!
David