CSSシークレット ―47のテクニックでCSSを自在に操る

課題

背景画像を配置する際に、左上以外の隅（例えば右下など）からのオフ

セットを指定したいことがよくあります。CSS2.1 では、左上からのオフ

セットか、その他の隅を表すキーワード し か 指 定 で き ま せ ん で し た

（図2.10 ）。のような表示を避けるために、左上以外の隅についてもパデ

ィングのような余白を指定できることが望まれていました。

コンテナ要素の大きさが固定の場合、面倒ですが回避策はあります。望

む位置に画像を配置した場合の左上からのオフセットを、自分で計算して

指定するという方法があります。ただし、中にコンテンツが含まれるなど

の理由で大きさを決定できないコンテナ要素では、この方法は利用できま

せん。そこで、100% よりも少し小さい値（95% など）が background‐

positionとしてしばしば指定されています。近年の CSSには、よりよい

方法が用意されています。

background‑position拡張を使った解決策

CSS Backgrounds & Borders Level 3 （ w3.org/TR/css3‐

background）では background‐positionプロパティが拡張され、すべ

ての隅からのオフセットを指定できるようになりました。ここでは

キーワードに続けてオフセットを記述します。例えば、右端から 20px下

端から10pxの位置に背景画像を表示させたい場合には、次のように指定

します。

柔軟な背景の位置指定

3

70 ...