Img Tag vs Div Background

Question

This is something I've been wondering for a while and haven't quite got my head around. What are the benefits of having an img tag over setting it as a div's background?

I've found that setting it as the divs background works better for scaling the image differently across several pages, whereas if it were an img tag, I'd most likely have to edit each image to fit desired areas.

Basically, I'm just looking for some pros and cons of the methods.

Much appreciated, if you can help :)

By setting it as a div's background a user won't be able to right-click on it. A more practical benefit, however, is that you can layer content on top of the image (e.g. text or other images). — Daniel Bonnell, Apr 17 '15 at 00:23

score 3 · Answer 1 · edited May 23 '17 at 10:33

3

If you are concerned about web accessibility and SEO (and you must be!), images must be in elements. Using the css property background-image:url(link) or similar on a layout element, such as a div, use cases that make them worth it are quite rare. Avoid that if at all possible.

This link answers this question very well.

edited May 23 '17 at 10:33

Community

1
1

answered Apr 17 '15 at 00:25

Ben Rondeau

2,983
1
15
21

1

Well, you cannot set an 'img' url with CSS, so you cannot put it in a central place. You'd have to specify the src attribute every single time the img is used, so img is useless. Div with a background shows an image just as well, and you can set the background url in a central stylesheet. – Triynko Sep 14 '16 at 12:56

Img Tag vs Div Background

1 Answers1