background-imageで背景画像を表示することがありますが、このときbackground-originは使っているでしょうか？
僕はつい最近まで、paddingが効いている要素に対して配置するときは、paddingの値を変数化してbackground-positionで調整していました。
馬鹿みたいに下記のように書いてました…。
こんな便利なプロパティがあったんですね。全然知りませんでした。
.block {
$padding: 10px;
padding: $padding;
background-image: url("");
background-repeat: no-repeat;
background-position: $padding;
}
そんなとき、background-originなるものを知ったので、忘備録的な形でまとめておきたいと思います。
background-originについて
これは、背景配置領域を指定することができます。
上記の例のように、そのまま書くとpaddingの値を無視した形で、paddingの領域から表示されることになります。
指定できる値は、border-box, padding-box, content-boxの３つになります。
それぞれについて説明してきたいと思います。
下記のようなボックスモデルがあったとします。
.block {
width: px;
height: px;
background-color: #f88;
padding: 15px;
border: solid 15px #333;
}
黒い線がborder、赤がcontentとなっています。
そして、content部分にはpaddingが指定されています。
普通に画像を設置してみる
通常通り画像を設置してみます。
qiitaのアイコン画像をお借りしました。
padding: 15px;を無視してそのまま表示されるので、paddingエリアにめりこんでいます。
.block {
// 共通部分は省略
background-image: url("");
background-repeat: no-repeat;
}
background-origin: content-box;を指定してみる
paddingを考慮した位置が基準となり、paddingにもborderにもめりこみません。
サイズ的に中央寄せみたいな感じに見えてしまいますが、中央寄せにはなりません。
中央寄せのときは、普通にbackground-position: center;などで対応してください。
.block {
// 共通部分は省略
background-origin: content-box;
background-image: url("");
background-repeat: no-repeat;
}
background-origin: border-box;を指定してみる
背景に指定した画像は、ボーダー境界の外側までめり込みます。
少しわかりづらいかもしれませんが、こんな感じになります。
.block {
// 共通部分は省略
background-origin: border-box;
background-image: url("");
background-repeat: no-repeat;
}
background-origin: padding-box;を指定してみる
指定なしと同じになります。
.block {
// 共通部分は省略
background-origin: padding-box;
background-image: url("");
background-repeat: no-repeat;
}
まとめ
以上になります。
大体のブラウザにも対応しているので、とても便利だと思います。
余程古いブラウザや、珍しいブラウザのサポートがない限り問題もなさそうです。
https://caniuse.com/#feat=background-img-opts