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:body{background-image:url("d:images

Haha, the idea is good, but does the browser you are using support it? I think IE or FF will definitely treat it as if they didn’t see it. Maybe you will ask, when I designed the forum style, was it achievable? I think if it is just the above code, it cannot control the picture, because it only controls the size of the BODY. Of course, there is no control here. If it is other ID tags, I think the range 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 the value of a property, not a real object. If you think of using CSS control, remember to tell me.

Supplement: W3C published an article called "CSS Backgrounds and Borders Module Level 3" on September 10, which adds several attributes to the CSS background that we have never seen before:

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

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

(4), background image position control:

My department imported the background image, but its location is really unacceptable. Because it is aligned to the upper left by default. 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 grammar:

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

b. Grammar 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
I will only write the following three examples for the values ​​​​of length | top | center | bottom.

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

Having said so many examples, I think you have a certain understanding of positioning.

(5), Transparency setting of background image:

Sometimes, we always want to set the picture to be transparent.

(6). Setting of multiple background images:

Regarding the setting of multiple background images, I saw it in "Beyond CSS: The Essence of WEB Design Art". However, it makes me very sad because the current browsers that support multiple background images in one label are too small, and the only one I know of is Apple Safari. You may ask, how is this possible. After you read 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. To me, I believe this is the trend. In a word, whoever has the stronger ability to interpret CSS will become the trend of development. Whoever has perfect WEB standards will be the browser star of tomorrow.

 

The code is as follows:

Copy the code

The code is as follows:

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