【CSS】要素の背景background-imageを自由自在に配置する3つの方法

こんにちは。メリークリスマス。

あっという間に年の瀬ですね。
今回はbackground-positionについて3つの指定方法をご紹介します。

上から10px、左から20pxに配置したい

これはそのまんま、簡単ですね。

background-position: 20px 10px;

下から10px、右から20pxに配置したい:其の1

向きのキーワード(top, left, right, bottom)とセットで設定します。

background-position: right 20px bottom 10px;

下から10px、右から20pxに配置したい:其の2

calc()を使います。100%から引くことで下から10pxを上からの値に変えてます。

background-position: calc(100% - 20px) calc(100% - 10px);

下から10px、右から20pxに配置したい:其の3

jQueryを使用します。

var el = $(".example"),
    bgWidth = 20,
    bgHeight = 20;

el.css({
    "background-position": (el.width()-bgWidth+10) + "px " + (el.height()-bgHeight-10) + "px"
});

まとめ

いかがでしたか?
CSSでの設定が楽ではありますが、calc()のブラウザ対応問題や、もっと複雑な位置指定となったときにはjQueryでの実装が自由度がありますね。

上下左右のセンタリングの際もそうでしたが、複数の実装方法を知っておくことで対応できる幅が広がります!

参考:Positioning Offset Background Images | CSS-Tricks

フォローして続編をチェック

@universionsをフォロー