<img> tag vs. div background-image in css

Good question Paul Barron

<img> is a HTML tag. It has a purpose that is to display images on a web document.

Purpose: Accessibility. When text based user agent renders the page alt attribute will be use. By default, browsers are not always set to print background image, so you using img tag will be beneficial.

When you use background image property in CSS it is a property to style the document. You can use CSS background property to set image when images are not part of document. It is merely for presentation.

background image property improve performance over img tag.

Hi Paul,

One advantage of adding images using css is that you can make the image stationary while the content scrolls. The css would look something like this:

body {
  background-image: url("img/image.jpg");
  background-attachment: fixed;
}

Jeff

Hi Paul!

As Jeff said, you can do some pretty nice stuff with backgrounds. You can see the full reference what you can do at here. It's also a lot harder to save a background image to users computer than a regular image.

By using <img> instead of backgrounds you can add for example alt attribute to your image. It makes your SEO better and provides an alternative solution to show if your image isn't available.

Those are few things that popped to my mind. Hopefully it was at least a little helpfull :)