Let's talk about filling background images.

Let's talk about filling background images.

In the design process, the first step is to first build a framework, and then use CSS to locate each block. However, the id of each style and the class blog garden have been defined. You can select the "Disable template default CSS" check box on the settings panel. Refresh the blog homepage to view the source code and copy the code to dw to modify the style. Finally, paste the modified css style to the text box "Custom pages through CSS" in "manage"-"blog Settings.

To put it bluntly, you need to fill in the background image during the design process. Because of the size of different browsers or windows, the image may only show one part or be filled multiple times, however, we only need to present a complete set of images.

This is the id style of a div:

# BlogTitle {

Background-image: url (image/blog2.jpg );
Height: 400px;
Padding-left: 5%;
Padding-top: 20px;
}

If the div size is different from that of the background image or the DIV size is not fixed, the image cannot be fully displayed.

Therefore, add the following sentence: 

# BlogTitle {

Background-image: url (image/blog2.jpg );
Height: 400px;
Padding-left: 5%;
Padding-top: 20px;

Background-size: cover;

}

Now the image can be automatically filled with the size of the browser display page. However, after testing, at least IE8 still cannot be displayed normally, and then we continue to test and find that this attribute can be used in firefox, chrome, 360, and ie9.

The following is what I got from the data search test.

1. If you want to display the background image in a certain size

# Background-size {

 

Background-size: 200px 100px;

 

} // The background image will be presented in PX * PX size and will be filled multiple times

2. If you want to display the background image in one hundred aspect ratio

 

# Background-size2 {

 

Background-size: 30% 60%;

 

} // The background image is displayed in 30% * 60% pixels of the source image size, which is filled multiple times.

3. You want to completely present the data only once.

 

# Background-size3 {

 

Background-size: cover;

 

} // The page is displayed only once when the background image is completely filled

 

4. To reduce the proportion and fill it repeatedly

 

# Background-size4 {

 

Background-size: contain;

 

} // Fill in the full div repeatedly according to the ratio of the original image

5. Fill in the source image size repeatedly

 

# Background-size5 {

 

Background-size: auto;

 

} // Fill up the div repeatedly according to the source image size