css3-background-size-001

background size property

WeasyPrint

Reference (good) by WeasyPrint

Reference (good) by this browser

This browser

Source

 1 <!DOCTYPE html>
 2 <html lang="en"><head>
 3     <meta charset="utf-8">
 4     <title>CSS Backgrounds Test:background size property</title>
 5     <link href="mailto:yanshasha133@gmail.com" rel="author" title="yanshasha">
 6     <link href="mailto:shendayang@baidu.com" rel="reviewer" title="Dayang Shen"><!-- 2013-08-26 -->
 7     <link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
 8     <link href="reference/css3-background-size-ref.htm" rel="match">
 9     <style type="text/css">
10             div {
11                 width: 150px;
12                 height: 150px;
13                 background-image: url(support/green-150-150.png);
14                 background-repeat: no-repeat;
15             }
16             #div1 {
17                 background-size: 30%;
18             }
19             #div2 {
20                 background-size: 60%;
21             }
22     </style>
23   </head>
24   <body>
25     <p>
26       The test passes if the following three green squares have different size.
27     </p>
28     <div id="div1"></div>
29     <div id="div2"></div>
30     <div id="div3"></div>
31   
32 
33 </body></html>