CSS background-position background Image positioning usage

Recently in the process of writing CSS, I found that the background-position verification of the organization has been adjusted, although only a small change, but may affect the coding habits of many people, so I decided to say.

1. Keywords, such as: Background-position:top right;

Advantages: Intuitive, high availability, consistent performance in each browser.
Disadvantage: Missing interval size. Three vertical (top, center, bottom) and three horizontal (left, center, right) can only be grouped for you up to 9 positions. There are no other combinations of blends. And it is difficult to use arithmetic to control the same way as the other two numerical positioning methods.

2. Pixel, for example: background-position:0px 0px;
Advantage: The concept is easy to understand, as long as you know how to measure the upper left corner of the container and the distance between the upper left corner of the picture, you can accurately infer the location of the picture display. Pixels can also be used to accurately control positioning in math.
Disadvantage: You must know the exact value.

Principle, as shown in the diagram. In fact, the upper-left corner of the picture is relative to the upper-left corner of the container.

3. Percentage, for example: background-position:80% 50%;
Advantage: Mathematics can be used to control positioning and is more flexible than pixel positioning.
Disadvantage: IE cannot handle complex percent positioning. You can take a look at this test.

Principle, as shown in the diagram. Unlike pixel positioning, its percentage position refers to the location of the container and the corresponding position within the picture as shown.

Let's take a look at the definition of Background-position by the consortium, and the rules for writing values are as follows:

[[<percentage> | <length> | left | center | right] [<percentage> | <length> | top | center | b Ottom]? ] | [[Left | center | right] | | [Top | center | bottom]] | Inherit
From the writing rules we can see that the value of the background-position can be a code number, numeric value, percentage; Can be a single value, double value; It can also be inherit.

The Background property can contain the Background-position property, which is written in the same rule. Examples listed in the consortium are as follows:

The code is as follows	Copy Code
Body {background:url ("Banner.jpeg") Right Top}/* 100% 0% * Body {background:url ("banner.jpeg") Top Center}/* 50% 0% * Body {background:url ("Banner.jpeg") Center}/* 50% 50% * Body {background:url ("Banner.jpeg") Bottom}/* 50% 100% *

The first two lines are horizontal and vertical two positions, one is horizontal and the second is portrait. The last two lines have only one value, the other is the default, and the default value will be center by default in the browser.

I have also been writing, that is, when you need a double value to write two values, do not need a single value. But today found that this writing CSS code will be the Validator of the CSS is wrong, the profile set to CSS 2, CSS 2.1, CSS 3 checksum error, error message is as follows:

Value error:background Parse Error [empty string]

In other words, in the future on the background label can no longer use a single value for picture positioning, otherwise can not be certified through the world.