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.