今回は上の画像のように配置したいときに、background-positionを右や下から基準で指定する方法を紹介します。
background-positionを右や下から指定する方法
rightやbottomというキーワードを入れてかけばokです。
background-position: right 10px bottom 10px;
大体の場合backgroundでまとめて指定することが多いと思うので、こんな感じに書くといいですね。
background: url(./path/to/image.jpg) no-repeat right 10px bottom 10px;
右や下から指定する際の注意点
background-positionを右（もしくは下）だけを基準で指定したいときは、topやleftといったキーワードも必要になります。
例えば基準を上と右にしたい場合は以下のようになります。
background-position: top 10px right 10px;
topやleftは普通なら勝手に基準になりますが、rightやbottomを基準にしたいときはtopやleftも明示的に指定する必要があるので気をつけましょう。
まとめ
アイコンなどを右や下を基準にして指定したいことは割とあると思うので、知っておくと地味に便利ですね。
