css sets background image for image_Experience exchange

The function of CSS is very powerful. It provides very powerful functions for the performance of elements and the layout of the page. This is mainly due to our flexible operation. In this regard, we provide rich and valuable tutorials and information. As for the use of images, it is actually more at the content level. According to the idea of ​​​​WEB standards, images in the presentation layer have been separated into CSS. Only pictures as content can be inserted into the page with the IMG tag, which is also the semantics that has been emphasized.

Setting a background image for a picture is a very practical example. This sentence may feel a bit funny. We set the background image for the image introduced into the page with the IMG tag. This kind of application scope may not be large, but it can train your thinking and let you understand the meaning and flexibility of elements in HTML and CSS.
Let's look at the code below.

　
　This is to introduce the image into the page with the img tag.

Let’s write CSS again.


img {
display:block;
width:443px;
height:60px;
padding-bottom:10px;
background:url(jb52bg. jpg) no-repeat left bottom;
}
Convert the img element to a block element and set the width and height. Set the bottom padding to 10px. Reserve some space for the background image to display. Finally define the background image.
From this small example, we can see the flexibility and powerful functions of CSS.