You can show an image on a web page by using the <img>HTML tag, or by adding the image as a background of another HTML element using the background-imageCSS rule. How to make that choice? Short answer: one is related to content, the other one to design.
Short answer: <img> is related to the content, background-image is related to the design.
You're often tempted to employ the background-image CSS property because of how easy it is to control the behavior of the image inside of its container: you can make it contain inside of, or cover the parent container, and precisely position it by setting the point of origin and top and left offset values. But the choice between using the HTML tag or the CSS background-image property shouldn't be made because of that.
The header image here is a decoration. It's not part of the message of the document, it's optional. It should use the background-image CSS property.
Here, the header image is an illustration of the message of the document. It is necessary for the content. It should be an image declared in the HTML file using the <img> tag.
A journey into photography
Embark in a new adventure. Discover a new kind of practice and a new generation of gear. Empower yourself to create images like you've never before.
You forgot about it but it never forgot about you. Remember? It's the size of the palm of your hand.
Shoot from the hip
Old reflexes are back in a snap. Master shooting from the hip again, be discreet, be patient...
Rangefinder!
Live your photography. And this doesn't count against your screen time
The images above are illustrating each of the 3 points. They're part of the content, they're using the <img> tag, and the object-fit CSS property with the value contain in order to fill up their parent container.
Here, the images are merely illustrating the specs, they're more a part of the page design than real content. They're declared using the CSS property background-image, which allow them to be layered and to repeat like a pattern.
Major differences between the <img> HTML tag and the CSS background-image property
An image using an <img> HTML tag is a part of the HTML document. It's still part of the document when the page is printed, or read through a screen-reader — a program used by people with disabilities — or a RSS feed reader, or when the document is displayed without CSS support. An <img> HTML element can have an Alt Attribute.
An image using a CSS background-image property is not part of the document. It only exists in the CSS file. It's never loaded of the CSS is not interpreted, it's also never indexed by search engine. As part of the CSS, it's considered as a less important element, only necessary for layout or decoration. It's not supposed to be of primary importance for the meaning of the document. An image displayed through CSS can't have an Alt Attribute.
Use case for using an <img> HTML tag
The image is important for the meaning of the document. It's directly illustrating a topic or a product, and/or it's referenced in the text of the document. This also ensure that your image and its alt title and text are going to be indexed by search engines.
Use <img> with alt attribute if the image is part of the content such as a logo or diagram or person related to the content.
Use <img> along with alt title and text, when the image has an important semantic meaning, such as a warning icon. This ensures that the meaning of the image can be communicated in all user-agents, including screen readers.
Use <img> if you rely on browser scaling to render an image in proportion to text size.
Using <img> tag instead of CSS background-image can dramatically improve performance of animations over a background.
Use case for using the CSS background-image property
If it's not part of the content but decoration, like a blurry background or a stock photo of people just being angry or happy. Those images are reinforcing the idea of the topic of the page, or act as a decoration, but they're hardly necessary for its comprehension.
When you need an image to repeat/loop, horizontally, vertically or both, i.e. to create a graphic line, or to paint an element with a seamless texture. etc.
Background images can be used in conjunction with background-color, background-repeat, background-attachment, background-position, and background-blend-mode.
That's not a lot of use cases for background-images. There used to have more, because of the options brought by the background-size CSS property, but the same control is now possible on images using the HTML <img> tag, with the object-fit CS property..
How to control the position of images?
Control the position of an image using the CSS background properties
All those properties are supported by Webflow's Designer UI, in the Style panel.
The CSS property background-image is used to call the file, using a URL
The CSS background-position is used to set the point of origin, e.g. center, and the exact position from the origin.
The CSS property background-repeat defines if the image repeats, and ho, e.g. no-repeat or repeat-x.
The CSS property background-size defines the behavior of the image, e.g. contain or cover.
The CSS property background-attachment defines if the image position is fixed or not.
Control the position of an image using the HTML <img> tag
The CSS property object-fit is used to define the behavior of the image inside of its container. e.g. contain or cover.
The CSS property background-position is used to set the point of origin, e.g. center, and the exact position from the origin.
An image using <img> tag can't repeat, and can't be fixed depending on the body, the way background-images can.
The background-position property is not yet supported. By default, img-positionvalue, when not declared, is 50% 50%, which means your image is zoomed from its center. You can easily add custom CSS rule to address this. In the example below, the CSS rule tell the image to zoom from its upper left corner.
