CSS3 background-size

Today's theme is background-size, before we start introducing backgrond-size, let's recall some of the attributes in Background in CSS2:

   Background: [<background-color>][,<background-image>][,<  background-repeat>][,<background-attachment>][,<      

Background we can put together its attribute value string, but also can write one by one, the following simple review of the values of each property:

First, set the background color: Background-color

  "><color> 

Background-color It is mainly used to set the background color of the element, its default value is transparent (not set any color case is transparent color),<color> used to set the background color, the commonly used color format is: Color name: such as "red"; RGB color : such as RGB (255, 0, 0) or RGB (100%, 0, 0), HLS value HSL (0, 100%, 50%), binary value #FF0000. The Rgba value Rgba (255,0,0,1) can also be used in browsers that support CSS3.

Second, set the background image: Background-image

  <url>

Background-image It is mainly used to set the background image of the element, the default value is none,<url> refers to the address of the background image, the address can be a relative address, or it can be an absolute address.

Third, set the background picture repeat: Wo Wang Background-repeat

  Repeat | | Repeat-x | | repeat-y | | No-repeat

Background-repeat is used to set background-image in the elements of the layout, its default is repeat, that is, the background image along the x-axis and the y-axis of the element is tiled simultaneously, The other values represent repeat-x: The background image is tiled horizontally only along the x-axis, repeat-y the background image is tiled only along the y-axis, and no-repeat indicates that the background picture does not have any placement formatting.

Set whether the background image is fixed or scrolls along with the rest of the page: background-attachment

  Scroll | | Fixed

Background-attachment is primarily used to set whether the background image is fixed or scrolled along with the rest of the page, and its default value is scroll, which indicates that the background picture scrolls with the scroll bar, and the background image is fixed when the value fixed.

V. Setting the position of the background image background-position

   <<length> | | [Left|center|right] [, Top|center|bottom] 

Background-position is mainly used for setting the background picture location, its default value is (0,0) | | (0%,0%) | | (left top), you can set specific percentages or values, or you can use the Left,center,top,right,top,bottom mate settings, where the following are the same positioning methods:

"Top left", "Ieft Top" and "0% 0%", "0,0" represent the upper-right corner of the element;

"Top", "Top Center", "center Top" and "50% 0" indicate the center position at the top of the element;

"Right Top", "Top" and "100% 0" are the positions of elements in the upper-left corner of the element;

"Left", "center" and "0% 50%" are indicated in the middle of the element to the center;

"Center", "Center Center" and "50% 50%" indicate the middle position of the element;

"Right", "center", "Center,right" and "100% 50%" are in the middle of the element.

"Bottom", "left Bottom" and "0% 100%" are represented in the lower-right corner of the element;

"Bottom", "Bottom Center", "center Bottom" and "50% 100%" indicate the position of the middle point at the bottom of the element;

"Bottom Right", "bottom" and "100% 100%" indicate the position in the lower-left corner of the element

You can carefully control:

The above simply introduces the use of several commonly used property values of background, and now begins to move on to today's theme: Background-size. We come together to learn the properties of Background-size, other than the first, we start with its syntax:

  <<percentage> | | cover | | contain 

Value Description:

1, Auto: This value is the default value, keep the original height and width of the background picture;

2, <length> This value set the specific value, you can change the size of the background picture;

3, <percentage> This value is a percent, can be any value between 0%?100%, but this value can only be applied on the block element, the set percent will use the background picture size according to the width of the element to calculate the percentage.

4, cover: This value is to enlarge the picture to fit the entire container, this is mainly used in, when the picture is smaller than the container, and can not use background-repeat to achieve, we may adopt the cover; enlarge the background image to fit the size of the container, But this method will use the background image distortion;

5, contain: This value is just the opposite of cover, its main is to reduce the background image to fit the entire container, this is mainly used when the background picture is larger than the element container, but also need to display the background image, At this point we can use contain to reduce the image to fit the size of the container, and this method also uses image distortion.

When the Background-size value is <length> and <percentage> can set two values, you can also set a value, when only one value, the second value is equivalent to auto, However, auto here does not keep the height of the background image at its original height, but will be the same as the first value.

Compatible browsers

Background-size, like some of the other CSS3 properties, need to add their own aliases,

   /*mozilla*/   <<<< < < < <percentage> | | Cover | | Contain        

The above is mainly targeted to introduce the theoretical knowledge of background-size, the following we look at its various values in the fear of showing the effect:

To illustrate the effect, a demo structure and a background map are given first:

HTML Code:

  <class="Demo" ></div>   

First, add some effect to it:

  . demo{background: url (width: 200px; height: 100px; line-height: 100px; border: 1px solid  #ccc; font-size: 14PX; text-align: Center;                /span>              

Look for a picture (50px*50px) to use as a background image:

Demo one, Background-size:auto;

I look at the first demo, in front of the demo plus a class named "Backgroundsizeauto", on this demo we apply the background shown earlier, and the background-size value of auto,

  {     -moz-background-size: auto;     -webkit-background-size:-o-background-size:background-size:}     

Effect:

The effect is obvious, this background map completely did not make any changes, said before, auto value is the use of the background map to stay the same, do not do any parameter modification, this effect is equivalent to no background-size effect.

Demo two, Background-size:<length>:

In this demo, give background-size a specific value, for example, the value is 150px 80px, such as:

  {    -moz-background-size:-webkit-background-size:-o-background-size:background-size: 80px; }

Effect:

Tell us, at this time the background image from the time of the 50px*50px into a 150px*80px, the background image is distorted. When the value is two, the first value is changed to the length of the background image, and the second value becomes the height of the background image, but if we take a value, then the value at this time will be defined to the width and height of the background image, equivalent to background-size:150px Auto. The other one has only two values, never a third value, and if there is a third value, you use the wrong one, and nothing will show.

Demo three, Background-size:<percentage>:

Now set the value of the demo to a percentage, and here I take a 80% 50%:

   {-moz-background-size:50%;  -webkit-background-size:50%;  -o-background-size:50%;  Background-size:}       

Effect:

The same effect tells us that the picture will change the size, but here is a point to pay special attention, the image size is not calculated by the percentage of background image size, but rather the percentage of elements in the background map, take our demo, The size of the Div.demo is 200px wide 100px high, at this time the background image size will be based on the Div.demo width and height of the percentage calculation, so that the background image is 200px*80% equal to 160px, and the background image of the high is the same 100px*50% Equals 50px, and if there is padding, it needs to be calculated together with the padding value. In addition, when it takes only one value, the width and height will be the same, equivalent to background-size:80% Auto.

Demo Two and demo three are to change the size of the background-image with a fixed value and a percentage, and can also be used in conjunction with two values, such as:

   {-moz-background-size:80%;  -webkit-background-size:80%;  -o-background-size:80%;  Background-size:}       

Effect:

Demo four, Background-size:cover;

   {-moz-background-size: cover;  -webkit-background-size: cover;  -o-background-size: cover;  Background-size:}       

Effect:

Once again, the Background-size value is cover, the background image itself will be enlarged to fit the size of the container, here I need to suggest that in IE there is a filter is similar to cover function,

   ProgID:DXImageTransform.  Microsoft. AlphaImageLoader (src= '. /images/background-image.jpg ', sizingmethod= ' scale '); -ms-Filter: "ProgID:dximagetransform.  Microsoft. AlphaImageLoader (src= '. /images/background-image.jpg ', sizingmethod= ' scale ');         

If the filter is used, Background-size:cover is not supported in IE6.

Demo five, Background-size:contain;

The cover of the demo three is to enlarge the background image to fit the size of the element container, when the contain is just the opposite of cover, it is to reduce the background image to fit the size of the element container, such as:

   {width:30px;  Height:-moz-background-size: contain;  -webkit-background-size: contain;  -o-background-size: contain;  Background-size:}          

Effect:

As we all know in the previous demo, the background image used in the example is 50px*50px, and now the element is changed to 30px*30px; the effect can be seen that the size of the background image at this time is also reduced to fit the size of the element container.

From the above several demo effect can be seen, only when the Background-size value is auto, the background image will not distort distortion, and other values will cause the background image deformation of the true, so we need to carefully consider, so as not to give you the production of bad results.

The use of Background-size cover allows us to solve the use of a background image in a different resolution size browser, he also often cooperate with the CSS3 Media Queries module, will achieve your unexpected effect, that is, said, A background map in the different resolution size of the browser display full screen, how to use, we first look at the following code:

   /* This code is when the CSS3 Media queries browser is not supported to display the background picture in Background-size:cover mode */Body{Background #000URL (mybackground_1280x960.jpg) center Center fixed no-repeat;-moz-background-size:Cover-webkit-background-size:Cover-o-background-size:CoverBackground-size:Cover}/*1024PX X 768px */@Media Only and (Max-width:1024PX) and (max-height:768PX) {Body{-moz-background-size: 1024px768px;-webkit-background-size: 1024px768px;-o-background-size: 1024px768px;Background-size: 1024px768px;} }/*640px X 480px*/@media only All and (max-width: 640px) and ( Max-height: 480px) {body {-moz-background-size: 640px  480px; -webkit-background-size:  640px 480px; -o-background-size: 640px Span class= "number" >480px; background-size: 640px 480px; }               /span>            

In the above example, the following two code respectively implemented the 1024x768 and 640*480 two resolution background image display full screen, plus the most front of the code is when the browser does not support CSS3 Media Queries module, the background map will be displayed in cover zoom form. For more detailed application in this area, you can go to alistapart.com and Soak blog for review.

Copyright belongs to the author.
Commercial reprint please contact the author for authorization, non-commercial reprint please specify the source.
Original: Http://www.w3cplus.com/content/css3-background-size? W3cplus.com

CSS3 background-size