この記事ではCSSの【background-position】の使い方をご紹介します。

background-positionを使うと、背景画像の初期位置を設定することができるので意図的に背景をずらしたりすることが可能になります。

通常は左上が初期値になっていますが、この背景画像は右下に移動したいなと思った時などに便利ですね。

スポンサーリンク

background-positionの基礎知識

ではbackground-positionでどんな風に記述すれば良いかとひとつずつ見ていきます。

background-positionの位置の決め方

背景画像の位置を設定する時はいくつか書き方があるので、表にまとめました。

キーワード(横位置) left / center / right
キーワード(縦位置) top / center / bottom
pxで設定  (例)10px
%で設定  (例)20%

このように、位置を決める時はキーワード・px・%のいずれかで設定することができます。

background-positionの基本的な書き方

background-positionの書き方

background-positionの書き方は基本的には上記の通り、最初に横位置を設定して、そのあとに半角スペースで区切って縦位置を設定します。

1つだけ書いた場合は、共通する数値やキーワードの場合は縦位置・横位置両方に適用され、該当しない場合は初期値(横位置が左・縦位置が上)が適用されます。

基準点(初期値)は左上になることも忘れずに覚えておいてくださいね。

background-positionのサンプルコードで実際に見てみよう

では実際に色々サンプルコードを使って、どんな書き方をすれば良いのかを確認しましょう。

今回はdiv要素に以下の猫の画像をbackground-imageで設定しました。そこにbackground-positionを使って画像の基準点を変えてみます。

cat

左下を基準にする

See the Pen background-position1 by handywebdesign (@handywebdesign) on CodePen.

右上を基準にする

See the Pen background-position2 by handywebdesign (@handywebdesign) on CodePen.

中心を基準にする

See the Pen background-position3 by handywebdesign (@handywebdesign) on CodePen.


基準位置を横も縦も中央にする場合は、centerとひとつだけ書けば設定できます(縦・横どちらにも共通するキーワードのため)。

左から10px、上から20pxを基準にする

See the Pen background-position4 by handywebdesign (@handywebdesign) on CodePen.

背景を左から5%、上から10%を基準にする

See the Pen background-position5 by handywebdesign (@handywebdesign) on CodePen.

基準の位置を変えたい場合は?

上で紹介したサンプルはあくまで「左上」の基準点を元に設定していますが、実はCSS3から「右下」を基準にすることができるようになりました。

右下を基準にして設定する場合は以下のように記述します。

background-position: right 10px bottom 30px;

rightとbottomを使うことで右下を基準にすることができるので、ぜひ使ってみてください。

background-positionを使うと画像の基準点を変えられる

というわけでbackground-positionの使い方についてでした。

background-positionを使うと、例えば模様や装飾を右下だけに表示させたい、といった場合に便利だと思います。使い方は工夫次第なので、ぜひ活用してみてください。