background-size-percent-percent-stretch-ref.html (743B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>background-size: 100% 100%; stretch reference</title> 5 <style type="text/css"> 6 #outer 7 { 8 border: 10px solid black; 9 width: 60px; 10 height: 120px; 11 } 12 #inner1 13 { 14 background: blue; 15 width: 15px; 16 height: 120px; 17 display: inline-block; 18 background-image: url(blue-16x20.png); 19 20 /* obscure sampling artifacts at the color boundary */ 21 border-right: 5px solid black; 22 } 23 #inner2 24 { 25 background: lime; 26 width: 35px; 27 height: 120px; 28 display: inline-block; 29 background-image: url(green-16x20.png); 30 31 /* obscure sampling artifacts at the color boundary */ 32 border-left: 5px solid black; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="outer"><div id="inner1"></div><div id="inner2"></div></div> 38 </body> 39 </html>