body直下にdivがあり、divは可変幅で中央寄せしてあり、 bodyに左側用の影画像が、#containerに右側用の影画像が指定してあります。
今回、左側用の影画像の幅は100pxで作ってあり、background-position:5%
を指定することで、
画像の左から5pxの部分(影の開始地点)とbodyの左から5%の位置を揃えます。
<body> <div id="container"> </div> </body>
body { background: #eee url(shadow-body.gif) 5% 0% repeat-y; } #container { width: 90%; margin:auto; background: #fff url(shadow-right.gif) top right repeat-y; }
この方法なら、divの数をひとつ減らしつつ、IE6の互換モードでも(もちろん標準モードでも)うまくいきます。
2007年8月16日 可変幅で両側にドロップシャドウ(div一重で) :てんぽ