I ask because my buddy posted a question earlier on How to resolve issue with image path when testing HtmlHelper? and a few of us in the office got talking about how to resolve this.
One of the guys suggested that he wouldn’t have this issue (Test crashing because it has a dependency on functionality in IIS) if he was referencing the image from CSS.
His point made perfect sense, but it kind of threw us back because we’d always been referencing images with <img/>. Were we doing it wrong all along? None of us are experts in this area so I thought it was worth putting to the community. What’s the best way to reference images?
There are a variety of benefits to using CSS
background-imageand inline<img />tags. CSS background images are great for decorative elements (content borders, background patterns, etc.) as they can be repeated withbackground-repeat. They make a poor choice for content-centric images, though, like product photographs, bio avatars, etc. Here, inline images work best because you can use an ALT attribute, and images are displayed regardless of browser (some older mobile browsers don’t support backgrounds in CSS).