Detailed explanation of the settings of background-image attribute in html

The background-image property allows you to specify an image to be displayed in the background. It can be used in conjunction with background-color, so if the image is not repeated, the background color will be filled with the background color if the image cannot be covered. The code is simple, just remember that the path is relative to the stylesheet, so in the following code, the picture and the stylesheet are in the same directory

For pictures, we first think of the background picture. Because many of our decorations are achieved with background pictures. Since that's the case, let's start with the CSS control background picture.

The background-image property sets the background image for the element.

The background of an element takes up all dimensions of the element, including the inner margins and borders, but not the outer margins.

By default, the background image is located in the upper left corner of the element and is repeated horizontally and vertically.

For a web page, when we started designing, we might not think too much about what the background image was, because most of them just need to design background colors. I think it is very simple, because it is the same as foreground music, and the speed of the web page opening will have a certain impact. However, for general personal websites or personal blogs, it is of course indispensable to show their own personality. Of course, nothing will not be too perfect. There are good things and bad things. That is, when the image is not available but CSS is available, the replacement content will not be displayed. Therefore, it is not recommended to use CSS background images in navigation button text or similar situations.

There are many CSS attributes that control background images, and most of them will be used as long as they are related to the image.

Of course, what everyone is most familiar with is background and background-image.

The code for designing background images for web pages is:

body {background:url(d:/images/04.jpg)}

or

body {background-image:url(d:/images/04.jpg)}

In this way, we can import the pictures we want to use as background into the web page.

Of course, using the above code alone will not be able to express the effect you want. Because if the picture is small, it will be tiled in a flat manner. If it is large, in order to display it, a scroll bar will appear, which is not good. Therefore, we have to use background-repeat for display control.

It is the value:

repeat : Default value. Background image tiled in portrait and horizontal direction

no-repeat: background image is not tiled

repeat-x: The background image is tiled horizontally only

repeat-y: The background image is tiled in the vertical direction only

As for the code, I think anyone who knows a little CSS knows it, as follows

:

body {background:url(d:/images/04.jpg);background-repeat:no-repeat}

In this way, it is displayed at the original image size.

But the question is, what if the picture is too large? For a good web page, it is best not to use too large images. The reason has also been mentioned above, which affects the speed of opening the web page. We'd better use PS or FireWorks to handle it. But since I mentioned it, we are not afraid to use CSS to control the image size.

I think many people will naturally use the following code: