Detailed explanation of the setting of background-image attribute in HTML

When it comes to pictures, the first thing we think of is the background picture. Because many of our decorations are realized using background images. In this case, let’s start with CSS controlling background images.

Definition and Usage

The background-image property sets a background image for an element.

The background of an element takes up the entire size of the element, including padding and borders, but excluding margins.

By default, a background image is positioned in the top left corner of an element and repeats horizontally and vertically.

1.CSS controls background images:

When we start designing a web page, we may not think too much about what the background image is, because most of the time we just need to design the background color. The reason is very simple, because like the foreground music, it will have a certain impact on the speed of opening the web page. However, for general personal websites or personal blogs, it is of course indispensable for showing one's own personality. Of course, nothing is too perfect. There are pros and cons. 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 properties for controlling background images, and most of them can be used as long as they are related to images.

(1) Importing background images:

Of course, the ones that everyone is most familiar with are background and background-image.
The code to design a background image for a web page is:

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

or

body {background-image:url("d:\images\04.jpg")}
In this way, we can import the picture we want to use as the background into the web page.

(2) How to display the background image:
Of course, using only the above code cannot express the effect you want. Because if the picture is small, it will be tiled. If it is large, a scroll bar will appear to display it, which is not good. Therefore, we have to perform more display control, that is, use background-repeat.

It takes the value:

repeat : The default value. Background image tiles in both vertical and horizontal directions
no-repeat : The background image does not tile
repeat-x : The background image is tiled horizontally only
repeat-y : The background image is tiled only vertically

As for the code, I think anyone who knows a little bit about CSS will know it, as follows:
body {background:url("d:\images\04.jpg");background-repeat:no-repeat}
In this case, it is displayed at the original image size.

(3) Background image size control:

But the question is, what if the image is too large? For a good web page, it is best not to use too large pictures. The reasons have been mentioned above, as it affects the speed of opening the web page. We'd better use PS or FireWorks to process it. But now that I mentioned it, we might as well use CSS to control the image size.
I think many people will naturally use the following code:

Oh, it's a good idea, but does your browser support it? I think IE or FF will definitely pretend not to see it. You may ask, when I designed the forum style, was it achievable? I think, if it is just the above code, it is impossible to control the image, because it only controls the size of the BODY. Of course, this is out of control. If it is any other ID tag, I think the size of the tag can be controlled. Haha, of course it is not the size of the image.
To be honest, this problem not only bothers you, but also bothers me. Because it is just a property value, not a real object. If you think of using CSS to control it, remember to tell me.

Supplement: W3C released an article titled "CSS Backgrounds and Borders Module Level 3" on September 10, which added several properties to the CSS background that we have never seen before:

background-clip:
background-origin :
background-size : Background size.
background-break ：

Although these attributes exist, there are currently no browsers that support them. It's so distressing.

(4) Background image position control:

I did import the background image, but its position is really unacceptable. Because it defaults to top left alignment. But we don't want to place it like this, so what should we do? Don’t worry, the exciting moment is coming soon. Now, let’s get to know background-position, background-position-x and background-position-y.

a. Basic syntax:

background-position : length || length
background-position : position || position
background-position-x : length | left | center | right
background-position-y : length | top | center | bottom

b. Syntax value:

length : Percentage | A length value consisting of a floating point number and a unit identifier.
position : top | center | bottom | left | center | right

c. Example:

body { background-image: url("d:\images\04.jpg"); background-position: 50% 50%; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position-x: 50%; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position-y: 50%; background-repeat:no-repeat; }

For the values ​​of length | top | center | bottom, I only write the following three examples.

body { background-image: url("d:\images\04.jpg"); background-position: top right; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position: 50% center; background-repeat:no-repeat; }
body { background-image: url("d:\images\04.jpg"); background-position: 60px center; background-repeat:no-repeat; }

After giving so many examples, I think you have a certain understanding of positioning.

(5) Transparency settings for background images:

Sometimes, we always want to set the image to transparent.

(6) Setting multiple background images:

I saw the setting of multiple background images in "Beyond CSS: The Essence of Web Design Art". However, I feel very sorry because currently there are too few browsers that support multiple background images in a tab, and the only one I know of is Apple Safari. You may ask, how is this possible? After you finish looking at this example, I think you will be surprised, "Oh my God, before CSS3, you could only use one image for each element." If you want to study it, install a SAFARI browser quickly. For me, I believe this is the way forward. In a word, whoever has a stronger ability to interpret CSS will be the trend of development, and whoever has perfect WEB standards will be the star of tomorrow's browser.

The code is as follows: