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