Css3:background-size Background Image Size properties

Background-size can set the size of the background picture, the value includes length and percent percentage. It also sets the extent of its image overlay based on the background Origin location Background-origin. So let's take a look at this background-size property.

Background-size syntax

The grammatical rules of background-size are as follows:

Property name:	background-size
Property value:	<bg-size>* where bg-size = [<length> | <percentage> | Auto]{1,2} | Cover | Contain
Initial value:	Auto Auto
Apply to:	All elements
Inheritance:	No
Percentage:	See note below
Calculated value:	According to the specified

Grammatical explanations

1, Length,percentage, adjust the background image size according to the given length value or percentage. Auto is the default value, and these three values can be repeated at least once and repeat two times at maximum. The following explanations are available for these values:
The first value sets the width of the picture, the second value is the height of the picture, but no matter what value it is, it cannot be negative .
If only one value is given, then the second automatic is ' auto ';
If the percentage percent value is specified, the background map size is adjusted according to the relative background area, which is determined by the background-origin. This has already been mentioned in the above discussion about the origin of the picture. Here it is necessary to mention that if background-attachment:fixed, then its background relative to the area is the initial containing block is the window.

/* A value: This value specifies the width of the picture, then the second value is auto */background-size:autobackground-size:50%background-size:3embackground-size:12px/* Two values: The first value specifies the width of the picture, and the second value specifies the height of the picture */background-size:50% Autobackground-size:3em 25%background-size:auto 6pxbackground-size:auto auto/* multiple backgrounds, please separate them with commas, and in CSS syntax the syntax followed by * or # can be infinitely repeated, but must be separated by commas. */background-size:auto, Auto/* Don't confuse */background-size:50% with Background-size:auto Auto, 25%, 25%background-size:6px , Auto, Containbackground-size:inherit
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
   
17
 
   
18
 
   
19
 
   
20
 
  
  
 

Code laycode-v1.1

2, contain, adjust the background picture proportionally, make its picture aspect ratio adapts to the aspect ratio of the whole element's background area, so if the specified picture size is too large, and the whole width height of the background area cannot contain the background picture, then some areas of its background may be blank. Look at the following code

. im-com{    width:200px;    height:50px;        Background:url (http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /* The width height of the picture is 440*440, and the element relative to the area is 50*/     background-size:contain;}. im-com-1{    width:50px;    height:100px;       Background:url (http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /* Element Relative area width is 50*/     background-size:contain;}      
 
   
  
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
      
 
   
  

Code laycode-v1.1When the picture is exactly self-adapting to the width or height of the element, the element will have an empty space, that is, the red box in the diagram shows the blank.

2, cover, adjust the background picture proportionally, this attribute value is opposite to contain, the background picture will fill the whole background area according to such as self-adaptation. If the background area is not enough to contain the background image, then the background image will be clicked.

. im-com{    width:200px;    height:50px;        Background:url (http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /* The width height of the picture is 440*440, and the element relative to the area is 50*/     background-size:cover;}. im-com-1{    width:50px;    height:100px;       Background:url (http://img.xiaoho.com/mystar/mada4.jpg) no-repeat top left scroll;   /* Element Relative area width is 50*/     background-size:cover;}      
 
   
  
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
           
  
    
   
      
 
   
  

Code laycode-v1.1When the value of cover is used, it is exactly the opposite of contain, it will cover the entire background of the relative area, but some parts of the background image is invisible, such as the dog's lower body and the right side of the physical display is not complete.Tell me about the background. Calculated values

It should not be difficult to understand if you just take a single numeric value or a specific value, but if you use a mixed length, you may not be able to understand it.

Specifications give a few examples, may wish to take out: first declaration, so the element size is 100*100

100% 100% The background image will be covered with the entire content area, if the element is inherently wide, then the background image is covered with the entire 100*100 background area div {background-image:url (plasma.png);    Background-repeat:no-repeat;    background-size:100% 100%; Background-origin:content-box} The background picture is adjusted to a width of 50*50, but the background picture's origin position is the border box instead of the padding-boxp {Background-image:url (tubes.png)    ;    background-size:50% Auto;    Background-origin:border-box} background image size adjustment to 15*15para {background-size:15px 15px;            Background-image:url (Tile.png)} This is the default value, which is auto Auto, at which time the background image will be the same size as the image's intrinsic size. body {Background-size:auto; /* Default value */Background-image:url (flower.png)} If two are all percentages, then the picture will be based on the background area to adapt to the aspect ratio, where the background image is 20*30, but because the background repeats the ' round ' loop,    Therefore, the background area is highly divided into 3 33.3 high-altitude regions, so the background image adjusts to 20*33.3p {Background-image:url (chain.png);    Background-repeat:no-repeat round;       background-size:20% 30%}
  
 

   
  
 
   
1
 
   
2
 
   
3
 
   
4
 
   
5
 
   
6
 
   
7
 
   
8
 
   
9
 
   
10
 
   
11
 
   
12
 
   
13
 
   
14
 
   
15
 
   
16
 
   
17
 
   
18
 
   
19
 
   
20
 
   
21st
 
   
22
 
   
23
 
   
24
 
   
25
 
   
26
 
   
27
 
   
28
 
   
29
 
   
30
 
   
31
 
  
  
 

Code laycode-v1.1

In the MND help document also mentions the background of the gradient picture of Firefox, but that is related to the FIREFOX8, the specification is not recommended to use both PX and auto, because the Firefox browser before 8 does not support repeated rendering, but I see on the Caniuse version is 31+,so, You have to use it. And for mobile browser support is very good, please see, except for the OPERA8 part is not supported:

Application Scenarios

The current use of background-size scenes are based on the background of WebApp, the general situation is, for example, the most common logo as an element of the background, but the logo is very complex, if we say according to the design map to slice, there are two possibilities:
1, according to Csser resolution to slice, such as height for 50px,logo is directly scaled to 50px that will be very awkward, and estimated that the picture is too beautiful, you dare not look;
2, according to the resolution of the shooting wet design to cut, it is possible to design the logo size will be very large, but we csser write when the height of only 50px, the logo will be displayed incomplete;

At this time background-size play an important role, we can through the background image size of the adaptive scaling, without affecting the aesthetics and can all show the effect we need.

Just throw out your phone and come out ... ↓

?

Resources:
http://dev.w3.org/csswg/css-backgrounds/#background-size
Https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Notes

Css3:background-size Background Image Size properties