Welcome to the Treehouse Community
Looking to learn something new?
Gabriele Rossi5,887 Points
background-image vs. <img>
Hi, I hope this question is not too obvious. I was wondering why, to add icons, we would use a background image for the
element and then "push it to the side" with padding and margin, rather than adding an
tag before each of the
Tim Knight28,863 Points
I think for me it's not so much just about semantic meaning, but flexibility. As I see it, icons don't really serve semantic value alone, they have some type of label that identifies them which is likely some form text or attribute. They're an assistive visual element for between visual recognition. Where I believe that using background images in CSS really shines is that it gives you the flexibility for theming your site. Everything related to the style and layout would be within your CSS. If you changed your CSS to reflect a darker style you could adjust those icons from within that same sheet without modifying the markup unnecessarily.
Depends on what you're trying to do. But in the case of the course it's to eliminate the additional item I guess. There are some instances where one works better than the other and that's your judgement call. But as a general rule of thumb, if the image has significant semantic meaning, like a warning icon or a logo use the img tag. Use background images as the name hints for backgrounds and additional fluff.