Detailed explanation of the setting of background-image attribute in HTML_HTML/Xhtml_Web page production

For pictures, the first thing we think of is the background picture. Because many of our decorations are implemented using background pictures. In this case, let’s start with controlling the background image with CSS.

Definition and usage

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

The

element's background takes up the entire size of the element, including padding and borders, but not margins.

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

1. CSS control background image:

For a web page, when we start designing, we may not think too much about what the background image is, because most of them just design the background color. I think the reason is very simple, because it is related to the foreground. Just like music, it will have a certain impact on the speed of opening a web page. However, for a general personal website or personal blog, it is of course indispensable for showing one's own personality. Of course, nothing is too perfect. There are good and bad. That is, when the image is not available but When CSS is enabled, replacement content will not be displayed, so it is not recommended to use CSS background images for navigation button text or similar situations.
There are many CSS properties for controlling background images. As long as they are related to images, most of them will be used.

(1). Import of background images:

Of course the most familiar ones are background and background-image.
The code for designing background images for web pages is:

body {background:url("d:images

or

body {background-image:url("d:images

(2) How to display the background image:

Of course, you cannot express the effect you want by just using the above code. Because if the picture is small, it will be tiled. If it is large, scroll bars will appear in order to display it, which is not good. Therefore, we have to perform more display control, that is, we need to use background-repeat, It is the value:

repeat: Default value. The background image is tiled both vertically and horizontally

no-repeat: The background image is not tiled

repeat-x: The background image is only tiled horizontally

repeat-y: The background image is only tiled vertically

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

body {background:url("d:images

(3), background image size control:

But the problem is, what if the image is too large? For a good web page, it is best not to use too large pictures, for the reasons mentioned above, it affects the speed of opening the web page. We'd better use PS or FireWorks to process it. But since I mentioned it, we don't want to use CSS to control the image size.

I think many people will naturally use the following code:

Copy code

The code is as follows: