Hi, constantly faced with the problem of choice: use the img tag or tie a block background-image? As for me, background-image is much more convenient, given the background-size: cover and background-position: center, and with img constant troubles: then the height jumps in pictures (they have different heights, therefore it happens whitespace, then they adjust. This is all solved styles, but I like backing more
Question Is there a difference in their use?

  • caniuse.com/#feat=background-img-opts background-size is not very cross-browser. The ubiquity of its use is due to your audience. If you have a project on which 10% of users sit under IE <11 - you can forget about background-siz, CSS3, flex and have to learn to “love” img) - Ivan Pshenitsyn

1 answer 1

The unspoken rules tell us that <img> should be used when this image does not play a cosmetic role, but is an important part of the content. Then it should participate in the markup of the document.

In the case of using the image for more beautiful design, use the background-image property.

In principle, this behavior suggests itself, if you read the general recommendations for creating web pages: html should be used only for markup, and any style features and decorations should be used via css .

PS Although, of course, this is not strictly, exceptions are always possible to achieve the desired design or functional goal.

  • Thank. For example, is a photo of a dish a makeup or a markup? - Nikita Shchypylov
  • 2
    @ Nikita Schipilov Depends on. If this is a dish or food list page, then this is an important part of the content. If this is a huge blurred picture on the main culinary site - then the background. - AK ♦
  • I would like to add that img has a unique ability to preserve the proportions of the image, which (if I am mistaken - correct me) cannot be achieved when used as a background. I can not now remember a way to create a scalable block with a picture-background and a percentage width (except for the hardcode aspect ratio). - Ivan Pshenitsyn