background-image-tiling-ref.html (10906B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 <html lang="en-US"> 4 <head> 5 <title>Pixel rounding of background image tiling</title> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <meta http-equiv="Content-Style-Type" content="text/css"> 8 <style type="text/css"> 9 10 body { background: black; } 11 12 .set { 13 height: 60px; 14 position: relative; 15 } 16 17 .item { 18 position: absolute; 19 width: 10px; 20 height: 10px; 21 background: aqua; 22 overflow: hidden; 23 } 24 .item > div { 25 position: absolute; 26 width: 15px; 27 height: 15px; 28 border: 1px solid yellow; 29 } 30 31 .item1 { left: 0px; } 32 .item2 { left: 15px; } 33 .item3 { left: 30px; } 34 .item4 { left: 45px; } 35 .item5 { left: 60px; } 36 37 .tl { top: 0px; } 38 .tl > div { top: 0; left: 0; } 39 40 .tr { top: 15px; } 41 .tr > div { top: 0; right: 0; } 42 43 .bl { top: 30px; } 44 .bl > div { bottom: 0; left: 0; } 45 46 .br { top: 45px; } 47 .br > div { bottom: 0; right: 0; } 48 49 .varydim .item1 { height: 10px; width: 11px; } 50 .varydim .item2 { height: 10px; width: 11px; } 51 .varydim .item3 { height: 11px; width: 11px; } 52 .varydim .item4 { height: 11px; width: 10px; } 53 .varydim .item5 { height: 11px; width: 10px; } 54 55 .varydim.athalf .item2 { width: 10px; } 56 .varydim.athalf .item3 { height: 10px; width: 10px; } 57 .varydim.athalf .item4 { height: 10px; } 58 59 .varypos .item1 { margin-top: 0px; margin-left: 1px; } 60 .varypos .item2 { margin-top: 0px; margin-left: 1px; } 61 .varypos .item3 { margin-top: 1px; margin-left: 1px; } 62 .varypos .item4 { margin-top: 1px; margin-left: 0px; } 63 .varypos .item5 { margin-top: 1px; margin-left: 0px; } 64 65 .varydim.athalf .item { 66 margin-top: 1px; margin-left: 1px; 67 } 68 69 .varypos.athalf .item1 { width: 11px; height: 11px; } 70 .varypos.athalf .item2 { height: 11px; } 71 .varypos.athalf .item4 { width: 11px; } 72 .varypos.athalf .item5 { width: 11px; height: 11px; } 73 74 /* remember that abs pos children are relative to the padding box */ 75 .border .item { padding: 1px; } 76 77 /* 78 * For the tiled images, use two divs as the children, and offset 79 * one so that it does only the vertical line, and the other so it 80 * does only the horizontal line. 81 */ 82 .border .item div:first-child { margin: 1px -1px; } 83 .border .item div:first-child + div { margin: -1px 1px; } 84 85 </style> 86 </head> 87 <body> 88 89 <div class="set varydim"> 90 <div class="tl item item1"><div></div></div> 91 <div class="tl item item2"><div></div></div> 92 <div class="tl item item3"><div></div></div> 93 <div class="tl item item4"><div></div></div> 94 <div class="tl item item5"><div></div></div> 95 96 <div class="tr item item1"><div></div></div> 97 <div class="tr item item2"><div></div></div> 98 <div class="tr item item3"><div></div></div> 99 <div class="tr item item4"><div></div></div> 100 <div class="tr item item5"><div></div></div> 101 102 <div class="bl item item1"><div></div></div> 103 <div class="bl item item2"><div></div></div> 104 <div class="bl item item3"><div></div></div> 105 <div class="bl item item4"><div></div></div> 106 <div class="bl item item5"><div></div></div> 107 108 <div class="br item item1"><div></div></div> 109 <div class="br item item2"><div></div></div> 110 <div class="br item item3"><div></div></div> 111 <div class="br item item4"><div></div></div> 112 <div class="br item item5"><div></div></div> 113 </div> 114 115 <div class="set varypos"> 116 <div class="tl item item1"><div></div></div> 117 <div class="tl item item2"><div></div></div> 118 <div class="tl item item3"><div></div></div> 119 <div class="tl item item4"><div></div></div> 120 <div class="tl item item5"><div></div></div> 121 122 <div class="tr item item1"><div></div></div> 123 <div class="tr item item2"><div></div></div> 124 <div class="tr item item3"><div></div></div> 125 <div class="tr item item4"><div></div></div> 126 <div class="tr item item5"><div></div></div> 127 128 <div class="bl item item1"><div></div></div> 129 <div class="bl item item2"><div></div></div> 130 <div class="bl item item3"><div></div></div> 131 <div class="bl item item4"><div></div></div> 132 <div class="bl item item5"><div></div></div> 133 134 <div class="br item item1"><div></div></div> 135 <div class="br item item2"><div></div></div> 136 <div class="br item item3"><div></div></div> 137 <div class="br item item4"><div></div></div> 138 <div class="br item item5"><div></div></div> 139 </div> 140 141 <div class="set varydim athalf"> 142 <div class="tl item item1"><div></div></div> 143 <div class="tl item item2"><div></div></div> 144 <div class="tl item item3"><div></div></div> 145 <div class="tl item item4"><div></div></div> 146 <div class="tl item item5"><div></div></div> 147 148 <div class="tr item item1"><div></div></div> 149 <div class="tr item item2"><div></div></div> 150 <div class="tr item item3"><div></div></div> 151 <div class="tr item item4"><div></div></div> 152 <div class="tr item item5"><div></div></div> 153 154 <div class="bl item item1"><div></div></div> 155 <div class="bl item item2"><div></div></div> 156 <div class="bl item item3"><div></div></div> 157 <div class="bl item item4"><div></div></div> 158 <div class="bl item item5"><div></div></div> 159 160 <div class="br item item1"><div></div></div> 161 <div class="br item item2"><div></div></div> 162 <div class="br item item3"><div></div></div> 163 <div class="br item item4"><div></div></div> 164 <div class="br item item5"><div></div></div> 165 </div> 166 167 <div class="set varypos athalf"> 168 <div class="tl item item1"><div></div></div> 169 <div class="tl item item2"><div></div></div> 170 <div class="tl item item3"><div></div></div> 171 <div class="tl item item4"><div></div></div> 172 <div class="tl item item5"><div></div></div> 173 174 <div class="tr item item1"><div></div></div> 175 <div class="tr item item2"><div></div></div> 176 <div class="tr item item3"><div></div></div> 177 <div class="tr item item4"><div></div></div> 178 <div class="tr item item5"><div></div></div> 179 180 <div class="bl item item1"><div></div></div> 181 <div class="bl item item2"><div></div></div> 182 <div class="bl item item3"><div></div></div> 183 <div class="bl item item4"><div></div></div> 184 <div class="bl item item5"><div></div></div> 185 186 <div class="br item item1"><div></div></div> 187 <div class="br item item2"><div></div></div> 188 <div class="br item item3"><div></div></div> 189 <div class="br item item4"><div></div></div> 190 <div class="br item item5"><div></div></div> 191 </div> 192 193 <div class="set varydim border"> 194 <div class="tl item item1"><div></div><div></div></div> 195 <div class="tl item item2"><div></div><div></div></div> 196 <div class="tl item item3"><div></div><div></div></div> 197 <div class="tl item item4"><div></div><div></div></div> 198 <div class="tl item item5"><div></div><div></div></div> 199 200 <div class="tr item item1"><div></div><div></div></div> 201 <div class="tr item item2"><div></div><div></div></div> 202 <div class="tr item item3"><div></div><div></div></div> 203 <div class="tr item item4"><div></div><div></div></div> 204 <div class="tr item item5"><div></div><div></div></div> 205 206 <div class="bl item item1"><div></div><div></div></div> 207 <div class="bl item item2"><div></div><div></div></div> 208 <div class="bl item item3"><div></div><div></div></div> 209 <div class="bl item item4"><div></div><div></div></div> 210 <div class="bl item item5"><div></div><div></div></div> 211 212 <div class="br item item1"><div></div><div></div></div> 213 <div class="br item item2"><div></div><div></div></div> 214 <div class="br item item3"><div></div><div></div></div> 215 <div class="br item item4"><div></div><div></div></div> 216 <div class="br item item5"><div></div><div></div></div> 217 </div> 218 219 <div class="set varypos border"> 220 <div class="tl item item1"><div></div><div></div></div> 221 <div class="tl item item2"><div></div><div></div></div> 222 <div class="tl item item3"><div></div><div></div></div> 223 <div class="tl item item4"><div></div><div></div></div> 224 <div class="tl item item5"><div></div><div></div></div> 225 226 <div class="tr item item1"><div></div><div></div></div> 227 <div class="tr item item2"><div></div><div></div></div> 228 <div class="tr item item3"><div></div><div></div></div> 229 <div class="tr item item4"><div></div><div></div></div> 230 <div class="tr item item5"><div></div><div></div></div> 231 232 <div class="bl item item1"><div></div><div></div></div> 233 <div class="bl item item2"><div></div><div></div></div> 234 <div class="bl item item3"><div></div><div></div></div> 235 <div class="bl item item4"><div></div><div></div></div> 236 <div class="bl item item5"><div></div><div></div></div> 237 238 <div class="br item item1"><div></div><div></div></div> 239 <div class="br item item2"><div></div><div></div></div> 240 <div class="br item item3"><div></div><div></div></div> 241 <div class="br item item4"><div></div><div></div></div> 242 <div class="br item item5"><div></div><div></div></div> 243 </div> 244 245 <div class="set varydim athalf border"> 246 <div class="tl item item1"><div></div><div></div></div> 247 <div class="tl item item2"><div></div><div></div></div> 248 <div class="tl item item3"><div></div><div></div></div> 249 <div class="tl item item4"><div></div><div></div></div> 250 <div class="tl item item5"><div></div><div></div></div> 251 252 <div class="tr item item1"><div></div><div></div></div> 253 <div class="tr item item2"><div></div><div></div></div> 254 <div class="tr item item3"><div></div><div></div></div> 255 <div class="tr item item4"><div></div><div></div></div> 256 <div class="tr item item5"><div></div><div></div></div> 257 258 <div class="bl item item1"><div></div><div></div></div> 259 <div class="bl item item2"><div></div><div></div></div> 260 <div class="bl item item3"><div></div><div></div></div> 261 <div class="bl item item4"><div></div><div></div></div> 262 <div class="bl item item5"><div></div><div></div></div> 263 264 <div class="br item item1"><div></div><div></div></div> 265 <div class="br item item2"><div></div><div></div></div> 266 <div class="br item item3"><div></div><div></div></div> 267 <div class="br item item4"><div></div><div></div></div> 268 <div class="br item item5"><div></div><div></div></div> 269 </div> 270 271 <div class="set varypos athalf border"> 272 <div class="tl item item1"><div></div><div></div></div> 273 <div class="tl item item2"><div></div><div></div></div> 274 <div class="tl item item3"><div></div><div></div></div> 275 <div class="tl item item4"><div></div><div></div></div> 276 <div class="tl item item5"><div></div><div></div></div> 277 278 <div class="tr item item1"><div></div><div></div></div> 279 <div class="tr item item2"><div></div><div></div></div> 280 <div class="tr item item3"><div></div><div></div></div> 281 <div class="tr item item4"><div></div><div></div></div> 282 <div class="tr item item5"><div></div><div></div></div> 283 284 <div class="bl item item1"><div></div><div></div></div> 285 <div class="bl item item2"><div></div><div></div></div> 286 <div class="bl item item3"><div></div><div></div></div> 287 <div class="bl item item4"><div></div><div></div></div> 288 <div class="bl item item5"><div></div><div></div></div> 289 290 <div class="br item item1"><div></div><div></div></div> 291 <div class="br item item2"><div></div><div></div></div> 292 <div class="br item item3"><div></div><div></div></div> 293 <div class="br item item4"><div></div><div></div></div> 294 <div class="br item item5"><div></div><div></div></div> 295 </div> 296 297 </body> 298 </html>