top left
left top
top
top center
center top
top right
right top
left
left center
center left
center
center center
right
right center
center right
bottom left
left bottom
bottom
bottom center
center bottom
bottom right
right bottom
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
<title>background-positionのキーワード</title>
<style type="text/css">
<!--
p { float: left; width: 8.5em; height: 6em;
background-image: url(back18-1.gif);
background-repeat: no-repeat;
font: bold 1.2em Verdana;
border: 1px solid black;
margin: 4px; }
p.p1 { background-position: top left; }
p.p2 { background-position: top; }
p.p3 { background-position: top right; }
p.p4 { background-position: left; }
p.p5 { background-position: center; }
p.p6 { background-position: right; }
p.p7 { background-position: bottom left; }
p.p8 { background-position: bottom; }
p.p9 { background-position: bottom right; }
-->
</style>
</head>
<body>
<p class="p1">
top left<br>left top
</p>
<p class="p2">
top<br>top center<br>center top
</p>
<p class="p3">
top right<br>right top
</p>
<p class="p4">
left<br>left center<br>center left
</p>
<p class="p5">
center<br>center center
</p>
<p class="p6">
right<br>right center<br>center right
</p>
<p class="p7">
bottom left<br>left bottom
</p>
<p class="p8">
bottom<br>bottom center<br>center bottom
</p>
<p class="p9">
bottom right<br>right bottom
</p>
</body>
</html>
