background-position-6-ref.html (675B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>background-position: top, bottom reference</title> 5 <style type="text/css"> 6 #outer 7 { 8 border: 1px solid black; 9 width: 128px; 10 height: 128px; 11 } 12 #inner1 13 { 14 margin-left: 48px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/ 15 margin-top: 0px; 16 width: 32px; 17 height: 32px; 18 background-image: url(aqua-32x32.png); 19 } 20 #inner2 21 { 22 margin-left: 48px; /** 128px - 32px - 32px **/ 23 margin-top: 64px; /** 128px - 128px * 0.50 + 32px * 0.50 - 32px **/ 24 width: 32px; 25 height: 32px; 26 background-image: url(aqua-32x32.png); 27 } 28 </style> 29 </head> 30 <body> 31 <div id="outer"><div id="inner1"></div><div id="inner2"></div></div> 32 </body> 33 </html>