The difference between <img> and <background-image> in CSS

Background-image is a background picture, is a style of CSS

< IMG/> is a block-level element, it is a picture, is a label of HTML

Background-image can only be seen.

< IMG/> can be manipulated. For example, changing the path of the IMG SRC can achieve the purpose of changing the image, can also move its location, remove from document and so on.

Background is the CSS3 style.

IMG is the HTML tag, there is an essential difference between the two

Background-image exists in large background, its properties are varied and the transformation is more abundant.

The ability to write on an IMG increases the remaining elements that you want to add

In general, if it is a decorative image of the use of background-img, if it is relevant to the stylistic content of the use of IMG

In the process of Web page loading, the image background-image with CSS background image will wait until the structure loading is complete (after the content of the Web page is displayed), and the tag img in HTML is a part of the structure (content) of the page that will be loaded during the loading of the structure, in other words, The page will load the contents of the tag img First, then load the background image background-image, if you introduce a large picture, then before the picture is downloaded, the contents of the IMG will not be displayed. And if you use CSS to introduce the same image, the structure of the Web page and content loading is completed before the loading of the background image, will not affect the content of browsing the web.

Yes, like extreme situations such as the background of the entire page, I will not hesitate to use Background-image, but a single picture, such as logo, as long as the loading out of the line, do not need to do anything complex operation, My understanding is that can be implemented in HTML do not go to the CSS, the simpler the better. But see a piece of code all the pictures are written with a div background picture, I suddenly confused this is right or wrong? Can someone tell me the pros and cons? For example, is there a difference in loading? SEO difference? Thank you!

In short, IMG is the content part of something, background-image is a cosmetic thing.

A little bit of text is

Img

From the page element, if the picture in the page appears as content, such as advertising images, such as product images, then this must be used IMG, because this is the content of the page element. page element content The key point is that when the page does not have a style, you can see the past to know what is ...

Background-image

Background images, cosmetic content, are optional on the page. Yes, in order to make the page visually feel more beautiful, no, does not affect users to browse the Web to get content.

In fact, the background image is loaded through the style, so that the page is more beautiful only, the content of the image is to show to the user. If one day your Web page does not have any style, then this time please think about your website which pictures are for the user to see, this is enough.

The foreground map img is something of a data nature that belongs to the content of the page.
The background map is a cosmetic thing, no matter what.

For example, the user image is definitely the foreground map, and the picture of the product list is also the foreground map. But the picture of the product list, some of the top left there is a recommended label, the price of the label, is definitely modified.