In CSS3 you can specify the size of the background picture (background-size). This is in the previous CSS to dare not think of the problem, now use CSS3 can be in pixels or percentages to specify the size of the background picture. The size of the background is the length and width of the corresponding area relative to the value of the background-origin you set.
The syntax is: background-size:[ Auto]{1,2} cover contain,length: A length value consisting of floating-point numbers and unit identifiers. is not a negative value. Percentage: Values from 0% to 100%. is not a negative value. You can also scale the picture by cover and contain.
Set the size of the background picture, there are 2 optional values, the 1th value specifies the width of the background chart, the 2nd value specifies the height of the background chart, and if only 1 is worthwhile, the 2nd value defaults to Auto
When defined as a percentage, the percentage value is relative to the container's value, but not to the picture itself.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title>css3 background-size</title> <meta name=" description "content=" Background-size "/> <meta name=" keywords "content=" css3,background-size,css3 background-size, background figure size, background image size "/ > <style> html,body,h1,h2,p{margin:0;padding:0;} body{padding:0 20px;font:14px/1.6 Arial; H1{FONT-SIZE:26PX} h2{padding:10px 0;font-size:16px; Tips{padding:10px;color: #c00; notes{padding:2px 10px; Background: #eee;} . navigation{padding:10px 0; copyright{padding:10px 0;font-style:italic;font-weight:bold;font-size:14px; div{ padding:0 20px;border:1px solid #999 background: #eee URL (/web/uploadpic/2012-3/201237184726441.jpg) no-repeat; #background-size{-moz-background-size:300px 100px; background-size:300px 100pX #background-size2{-moz-background-size:40% 80% background-size:40% 80%;} #background-size3{-moz-background-size: Cover Background-size:cover; } #background-size4{-moz-background-size:contain; Background-size:contain; } #background-size5{-moz-background-size:auto; Background-size:auto; } </style> </pead> <body> <p>css3 background-size:[lengthpercentageauto]{1,2}covercontain </p> <p class= "notes" > Browser reference Datum: Firefox3.6 and later, Chrome5 and later, Safari5 and later, Opera10.6 and later , IE series does not do reference </p> <p class= "Tips" >* is used to set the size of a background picture, there are 2 optional values, the 1th value specifies the width of the background chart, and the 2nd value specifies the height of the background image, if only 1 is worth the The 2nd value defaults to auto</p> <p> pictures:</p> <p></p> <p> background Chart dimensions (numerical representation):</p> <div id=" Background-size "> <pre ><code> #background-size{-moz-background-size:300px 100px; background-size:300px 100px;} </code></pre> </div> <p> Background Chart Dimensions (percentage representation):</p> <div id= "Background-size2" > <pre><code> #background-size2{- moz-background-size:40% 80%; background-size:40% 80%; }</code></pre> </div> <p> background image size (equal ratio extended picture to fill element, i.e. cover value):</p> <div id= " Background-size3 "> <pre><code> #background-size3{-moz-background-size:cover; background-size:cover ; }</code></pre> </div> <p> Background chart size (equal to the size of the element, i.e. contain value):</p> <div id= " Background-size4 "> <pre><code> #background-size4{-moz-background-size:contain background-size: contain; }</code></pre> </div> <p> background image size (fill the element with the picture itself, that is, auto value):</p> <div id= " Background-size5 "> <pre><code> #background-size5{-moz-background-size:auto; background-size:auto;} </code></pre> </div> </body> </ptml>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
