|
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> |