The use of CSS Background-image properties

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.