What is the better option to put text over the image? img src or div style background image url?

Question

What is more used option to put text over image? Does text usually go better with use of ordinary img src="picture.jpg" or use div stlye="background-image: url(picture url); " ?

I asked this because many poeple use different browsers.

thank you.

Answer 1

You can use both, both modern browsers and older ones will handle both methods correctly - background images in CSS and <img> are old and stable techniques.

Which you should pick, it depends on type of image and and purpose. As a rule of thumb, if it is really an image with meaningful content relevant to the rest of the page, you want it to be downloadable (right click - save image), indexed by search engines or enabled to users with screen readers or other assistive technologies, use <img> . Otherwise use background image.

Also, if you need to create some type of schema or diagram that combines image and text, best solution would be to use SVG.