background-size-zoom-repeat.html (1224B)
1 <!DOCTYPE html> 2 <html reftest-zoom="2"> 3 <head> 4 <title>background-size: 64px 40px; repeat, zoom</title> 5 <style type="text/css"> 6 html 7 { 8 margin: 0; 9 padding: 0; 10 } 11 body 12 { 13 margin: 0; 14 padding: 10px; 15 } 16 #outer 17 { 18 /* 19 * PRE-ZOOM: 20 * 2x size the image, then tile it 4x4 across the div; sampling artifacts at 21 * 32px horizontal offset, then every 64px for the full height of the div. 22 * POST-ZOOM: 23 * 4x size the image, then tile it 4x4 across the div; sampling artifacts at 24 * 64px horizontal offset, then every 128px for the full height of the div. 25 */ 26 width: 256px; 27 height: 160px; 28 background-image: url(blue-16x20-green-16x20.png); 29 background-repeat: repeat; 30 background-size: 64px 40px; 31 } 32 33 /* Aargh, sampling artifacts, we hates them, precioussss. */ 34 #outer > div 35 { 36 display: inline-block; 37 width: 28px; 38 height: 160px; 39 } 40 .blue 41 { 42 border-right: 4px solid black; 43 } 44 .green 45 { 46 border-left: 4px solid black; 47 } 48 </style> 49 </head> 50 <body> 51 <div id="outer"><div 52 class="blue"></div><div 53 class="green"></div><div 54 class="blue"></div><div 55 class="green"></div><div 56 class="blue"></div><div 57 class="green"></div><div 58 class="blue"></div><div 59 class="green"></div></div> 60 </body> 61 </html>