CSS 背景画像の位置を指定 background-position

背景に画像を指定する場合、css2.1では、左上からしか指定できなかったのですが、css3からは上下左右いずれの隅からも指定できるようになりました。

background-position: right 10px bottom 10px;

background-position 使用例

background: url(logo.png) no-repeat #c9e2dc;
background-position: right 20px bottom 20px;

1行目はbackgroundのまとめ指定です。画像のURL・繰り返しの有無・カラーを指定しています。2行目は位置の指定です。右から20pxしたから20pxの位置に配置するように指定しています。

左上から指定するより、イメージがつきやすいのでできる限りこちらの指定方法を利用したいのですが、古いブラウザは対応していません。古いブラウザでは左上に表示されてしまいます。対応する必要がある場合は、

background: url(logo.png) no-repeat right bottom #c9e2dc;
background-position: right 20px bottom 20px;

のように、backgroundまとめ指定の部分にbottomとrightを追加します。

calc()を使う指定方法も使いやすい

次は左上を基準にする方法ですが、左上からパーセント（%）指定するすると位置の調整がとても面倒です。そこで、calcを使うことで、バッチリ指定した場所に配置することができます。下記のスタイルシート例をみてください。

background: url(logo.png) no-repeat #c9e2dc;
background-position: calc(100% - 50px) calc(100% - 40px);

２行目のcalc(100% – 50px)は、右からの位置です。calc(100% – 40px)は下からの位置です。注意事項としてcalcの空白は削除しないでください。削除すると動きません。スタイルシートを圧縮する場合に注意する必要があるのでその辺が問題です。