CSS set background image for the picture _ Experience Exchange

The functionality of CSS is very powerful, for the performance of the elements and the layout of the page provides a very powerful function, which is mainly in our flexible operation, in this area provides a rich and valuable variety of tutorials and information. For the use of pictures, in fact, more in the content layer. According to the concept of web standards, the presentation layer of the picture, has been separated into the CSS. Only images that are content can be inserted in the page with an IMG tag, which is the semantics that has been emphasized.

Setting a background image for a picture is a very practical example. This sentence may feel a little fun. We set up a background image for a picture that introduces a page with an IMG tag. This may not be a big application, but you can train your mind to understand the meaning and flexibility of elements in HTML and CSS.
Let's look at the code below.

　　
This is the introduction of the image to the page with an IMG tag.

Let's write the CSS again.


IMG {
Display:block;
width:443px;
height:60px;
padding-bottom:10px;
Background:url (jb52bg.jpg) no-repeat left bottom;
}
Converts an IMG element to a block element, setting width and height. Set the padding on the lower side to 10px. Set aside some space for the background picture to appear. Finally, you can define the background image.
From this small example, you can see the CSS flexible and powerful features.

