The use of CSS Background-image properties

For the picture, we first think of the background image. Because we make a lot of decorations are used in the background image to achieve. In that case, let's start with the CSS control background image.

Definition and usage

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

The background of an element occupies the full dimensions of the element, including padding and borders, but excluding margins.

By default, the background image is in the upper-left corner of the element and repeats in both horizontal and vertical directions.

1.CSS Control Background Image:

For a Web page, we began to design, may not be too much to think about the background map is what, because most of the design background color can be, why, I think it is very simple, because it is like the foreground music, for the opening of the web, the speed will have a certain impact. However, for the general personal site, or personal blog, it is necessary to show their own personality, of course, nothing is too perfect, there is good and bad, that is, when the image is not available, but the 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 to control the background image, as long as the related to the picture, most will be used on.

(1), Background image import:

Of course, we are most familiar with background and background-image.
The code for designing 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 that case, we'll be able to guide the images that we want to background into the web.

(2), the background image display way:
Of course, only using the above code, it is impossible to express the effect you want. Because, the picture is small, it will be tiled way, if it is large, in order to show it, it will appear scroll bar, so much bad. So we're going to have to show more control, which is to use Background-repeat,

It is value:

Repeat: Default value. Background images are tiled vertically and horizontally
No-repeat: Uneven background image
Repeat-x: Background image is tiled horizontally only
Repeat-y: Background image is only tiled vertically

And the code, I want to know a little bit of CSS, as follows
：

Body {background:url ("d:\images\04.jpg"); Background-repeat:no-repeat}

In this case, it is displayed with the original image size.

(3), the size of the background image control:

But the question is, what if the picture is too big? For a good web page, it is best not to use too big pictures, the reasons mentioned above, affecting the speed of opening the page. We'd better handle it with PS or fireworks. However, since I mentioned, we also do not use CSS to achieve image size control.
I think a lot of people will naturally use the following code:

<style type= "Text/css" >body{background-image:url ("d:\images\04.jpg"); width:350px;height:350px;} </style>

Oh, the idea is good, but you use the browser support it? I think IE or FF will not see it. Perhaps you will ask, I used to design the forum style, it can be achieved AH? I think, if it's just the code above, it's not controllable, because it just controls the size of the body. Of course, there is no control here. If it is another ID tag, I think it is possible to control the size of the mark, hehe, of course, it is not the size of the image.
To tell the truth, this problem not only bothers you but also bothers me. Because it's just a property value, not a real pair of images. Think of using CSS control words, remember to tell me oh.

Added: In September 10, the "CSS backgrounds and Borders Module Level 3" article was published, which added several properties that we have never seen in the context of CSS:

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

Although these properties are available, there are no browsers that support them. What a great distress.