Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML How to Make a Website Adding Pages to a Website Add Iconography

Klemen Horjak
Klemen Horjak
4,737 Points

Could 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?


<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
David McNeill
44,425 Points

Hi Klemen,

It's a good question! Both options are valid, but for me it comes down to a couple of things...

  1. 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.

  2. 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!


1 Answer

Klemen Horjak
Klemen Horjak
4,737 Points

Thanks for answer!