The Proper Use of img and background-image Property
There seems to be confusion among web designers when to use the img tag vs the CSS background-image property.
Both tags are frequently used improperly. Usually this isn't revealed until it comes time to give the site a facelift or update photos.
Really it isn't difficult to keep your images inline. Read below for a couple helpful tips.
- Use the img tag when the image is not related to the stylesheet.
- These are photos that need to display no matter how the look and feel of the site changes.
- Some examples may include a profile photo or images in a photo gallery.
CSS background-image should be used for images that make up the design of the site.
When the stylesheet is not loaded these images are not displayed.
A simple question to ask yourself when considering using the background-image property is, "Does this image contribute to the content of the website?". If the answer is no, most likely, the CSS background-image property is the way to go.