CSS3 background picture percentage

Original link: http://caibaojian.com/background-position-percent.html

background-position:50% 0;  background-size100% auto;  

Via to background-size:100% Auto, which means that the background image width is *100% to the width of the element, and the height is scaled. Details can be seen CSS3 background. originally from: Http://caibaojian.com/background-position-percent.html

For background-position It is natural to think that percentages are based on the width of the parent element, but Background-position really is not, it has its own principle. This is detailed below.

Equivalent notation

When looking at various tutorials, we have the following equivalent notation:

• Top left and left top equivalent to 0% 0%.
• Top, top center, center top is equivalent to 50% 0%.
• Right top, and top right is equivalent to 100% 0%.
• Left, left center, center left is equivalent to 0% 50%.
• Center, center Center is equivalent to 50% 50%.
• Right, right center, center right is equivalent to 100% 50%.
• Bottom left and left bottom equivalent to 0% 100%.
• Bottom, bottom center, center bottom equivalent to 50% 100%.
• Bottom right, the right bottom is equivalent to 100% 100%.

So why is left,top equivalent to 0% 0%,right bottom equivalent to 100% 100%?

Percentage Calculation formula

when any CSS property value is percent, it needs to be calculated based on a reference value, and it is much easier to understand what the reference value is.

Standard specification: The reference value of BACKGROUND-POSITION:PERENCT is: (container width-background image width).

Code from HTTP://CAIBAOJIAN.COM/BACKGROUND-POSITION-PERCENT.HTMLBACKGROUND-POSTION:X y;x:{container (container) Width- The width of the background picture is}*x percent, and the excess part is hidden. The height of the y:{container (container)-the height of the background image is}*y percent, and the excess portion is hidden.

With this formula, it is easy to understand the hundred-percent writing, calculate it is easy to understand the above types of equivalent notation.

Example

1, Background-position:center Center equivalent to background-position:50% 50% equivalent to background-position:?px? px

For example, the following "size: 200px*200px" is used in the background map:

The background map is centered in the container.

<style type= "Text/css" >.wrap{    width:300px;    height:300px;    border:1px solid Green;    Background-image:url (img/image.png);    background-repeat:no-repeat;/*    background-position:50% 50%;*/    background-position:center Center;} </style><div class= "Wrap" ></div>

The effect is to center the background image

As above by setting percentages and keywords can achieve the center of the background map, if you want to achieve by the specific value to set the picture centered how much?

According to the above formula:

x= (width of container-background width) *x percent = (300px-200px) *50%=50px;

y= (height of container-background height) *y percent = (300px-200px) *50%=50px;

That is set background-postion:50px 50px;

Test it:

<style type= "Text/css" >.wrap{    width:300px;    height:300px;    border:1px solid Green;    Background-image:url (img/image.png);    background-repeat:no-repeat;/*    background-position:50% 50%;*//*    background-position:center center;*/    background-position:50px 50px;} </style><div class= "Wrap" ></div>

The effect is equally centered.

Estimated percentage:

From the above, the percentage is the value of Background-position-x = (the background is in Sprite's left width)/(container width-background image width) *100%.

Normal use background-position , usually with a fixed value, such as:

.hello {  50px 50px; // 背景图片左上角离包含块左上角距离为水平方向 50px，竖直方向 50px}

If the above fixed value is 50px, what percentage do I insist to write?

The known background picture size is 150x150 and contains a block size of 200x200.

The answer is:

.hello {  background-position: 100% 100%;}

This value is calculated as follows:

50/(200-150)*100% = 100%

This is because background-position the concept is not the same as a fixed value when using percentages.

As the above example says, if set background-postion:10% 30%; , then the point in the horizontal direction 10% of the background picture coincides with the point that contains the horizontal 10% position of the block. Converted to a fixed value:

(200-50)*10% = 5

The schematic is as follows:

But if we use a negative percentage, then the browser is treated in the same way as the absolute value, such as:

.test {  background-position: -10%, -50%;}

is to have the background image start at the containing block (-10%,-50%) The location.

This concept is not very intuitive, so no scrutiny words, it is easy to misunderstand.

Inapplications in rem

When using the adaptive, because the digital error causes the background picture to appear some minor deviation problem, if can position the background picture through the percentage, rather than the default REM to locate, may be more accurate.

CSS3 background picture percentage