CSSのbackground-positionで右や下から基準で指定する方法

CSSのbackground-positionで右や下から基準で指定する方法 CSS

今回は上の画像のように配置したいときに、background-positionを右や下から基準で指定する方法を紹介します。

 

スポンサーリンク

background-positionを右や下から指定する方法

rightbottomというキーワードを入れてかけばokです。

background-position: right 10px bottom 10px;

 

大体の場合backgroundでまとめて指定することが多いと思うので、こんな感じに書くといいですね。

background: url(./path/to/image.jpg) no-repeat right 10px bottom 10px;

 

右や下から指定する際の注意点

background-positionを右(もしくは下)だけを基準で指定したいときは、topleftといったキーワードも必要になります。

例えば基準を上と右にしたい場合は以下のようになります。

background-position: top 10px right 10px;

 

topleftは普通なら勝手に基準になりますが、rightbottomを基準にしたいときはtopleftも明示的に指定する必要があるので気をつけましょう。

 

まとめ

アイコンなどを右や下を基準にして指定したいことは割とあると思うので、知っておくと地味に便利ですね。