CSS Background Images vs. HTML IMG Tags
When should you include an image as a background in your CSS rather than including it directly in your HTML code?
If the image is primarily for decoration then include it as a background image in your CSS.
If the image contains text such as a fancy button image, you can include a plain version of the image without text as a background in your CSS. Then Use CSS to style HTML browser-rendered text to overlay the background image. This gives the advantage of making your text easy to edit and update later if needed and can reduce the number of background images you need to make since you can use the same background with different text overlaid as needed.
If the image contains text in an unusual font such as display text or a logo that can’t be reproduced satisfactorily by a browser then you can set it as a background image and use CSS to hide and replace the text in your HTML with the image. (Never use empty tags to display text as a background image. Always include the text in your HTML as well.)
If the image represents actual content then it should be included in your HTML as an IMG tag. Examples are photos of products or people and photos or artwork images in a gallery.