右下配置のCSS 背景画像に余白をつける

2021年3月30日

CSS背景に画像を指定することはよくあることです。
背景指定方法には、縦位置、横位置の指定があり、左上、右下などに配置できます。

ところが最近「右下余白20ピクセル」に設定という仕様がありました。
左上余白20ピクセルならば、上下・左右の指定に20px を記述すればOKです。

background-position: 20px 20px;

ただ、これって左上からの位置指定のため、右下からの位置指定ができません。
いったいどうすれば右下位置の余白指定ができるのでしょうか?

ググって調べて対処できましたので、忘備録として記録いたします。

おさらい：単純に余白なしで四隅に配置する

余白なしで四隅に配置するのは簡単です。
こちらに四隅配置例を用意しましたので、参照いただければ幸いです。

余白ナシならば簡単にできます。

では左上配置で余白を設定するパターンを考えてみました。
左上余白配置例はこちらです。

右下にピクセル指定するにはどうすればよいのでしょうか？
とにかく調べました。

次のようにやるとできます。おもったより簡単でした

background-position: right 20px bottom 20px;

これだけ？
と思いましたが、コロンブスの卵的なやり方でできました。
実際に配置してみた例がこちらです。

right、bottom にピクセル数を指定できることを知らなかったために、悩んでいただけでした。

ちなみに、left 20px top 20px というような指定もできました。
むしろこちらのほうが正確な記述のようです。

簡単なことでしたが勉強になりました

今までの経験から右下余白指定はできないものだと思い込んでいただけでした。
頭を柔らかくして調べれば、「なんだそんなことか…」ということでした。

固定概念は禁物ということを学びました。