/
background-positionは、要素内での背景の配置 ( 開始位置 ) を指定するcssプロパティ。
指定した配置に合わせて、背景の開始点 ( 左上 ) が、下と右に移動 します。
少し癖があり使用頻度は低いですが、要素のpaddingと背景位置を合わせるなど、差別化したレイアウトに便利なプロパティです。
- 配置が適用されるのは開始点 ( 左上 ) のみです。
background-attachment:fixedを指定した場合、background-origin の指定は無視 されます。
background の種類
| . | 値 | 用途 | 親要素 |
|---|---|---|---|
| 1 | background-image | 背景画像、又は、グラデーション | カンマで繋いで複数指定可 |
| 2 | background-attachment | 位置の表示方法 | 固定(fix)するか要素と一緒にスクロールするか等 |
| 3 | background-position | 画像の初期位置 | 最初に表示される位置 |
| 4 | background-size | 画像のサイズ | 要素に対する相対、又は、指定サイズ |
| 5 | background-origin | 要素に対する配置(開始)位置 | 背景の開始点(左上)を指定する |
| 6 | background-clip | 画像自身の配置位置 | 指定に合わせ要素内でクリップされる |
| 7 | background-repeat | 画像の繰り返し | 繰り返しの有無、方向、配置を指定 |
| 8 | background-color | 背景色 |
background-origin 指定できる値
各プロパティをまとめて指定します
| . | 指定名 | 位置 (相対) | 開始点 (左上) |
|---|---|---|---|
| 1 | background-origin: border-box; | borderの端まで | border→含む, padding →含む |
| 2 | background-origin: padding-box; | paddingの端まで(初期値) | border→含まない, padding →含む |
| 3 | background-origin: content-box; | paddingの内側 | border→含まない, padding →含まない |
| 4 | content-box + border-box | — | 画像ごとに指定する |
background-origin サンプル
背景画像は個別に指定できるよう、以下の 2種類の画像を重ねがけしています。
共通となるcssはまとめて、それぞれclassを２重掛けにします。
bga1.png- サイズ:
600×350px - タイプ:
png24(透過)
bga2.png- サイズ:
600×350px - タイプ:
png8
共通CSSとHTMLを見る
CSS code
.bga {
aspect-ratio: 60 / 35;
width: 400px;
max-width: 100%;
margin-bottom: 24px;
background-image:
url("https://millmi.com/wp/wp-content/uploads/2024/09/bga1.png"),
url("https://millmi.com/wp/wp-content/uploads/2024/09/bga2.png");
background-size: 400px auto;
background-repeat: no-repeat;
padding: 40px;
font-size: 24px;
box-sizing: padding-box;
border: dotted 18px #FF889D;
}HTML code
<div class="bga">～～</div> /* ←値に合わせclassを2重掛けにします */- 要素(
div)は、box-sizing: padding-box;padding: 40px;にしています。 background-sizeを100% autoやcoverにすると位置が不安定になる為、横幅px auto等の数値指定 にする必要があります。- 背景は要素内コンテンツではない為
box-sizingの指定は影響しません。 - borderを含む要素全体の相対位置となり、下と左は要素端まで、要素からはみ出る部分は切り取り(非表示)になります。
1 – background-origin: border-box;
開始点(左上) → 要素端 (border の外側)。
これは border-box
HTML code
<div class="bga bga1">これは border-box</div>CSS code
.bga1 { background-origin: border-box; }2 – background-origin: padding-box;
開始点(左上) → border の内側、 padding の外側
これは padding-box
HTML code
<div class="bga bga2">これは padding-box</div>CSS code
.bga2 { background-origin: padding-box; }3 – background-origin: content-box;
開始点(左上) → padding の内側
これは content-box
HTML code
<div class="bga bga3">これは content-box</div>CSS code
.bga3 { background-origin: content-box; }4 – 画像ごとに background-origin を変える
背景画像を複数設定した場合、値をカンマ','で繋ぐ事で、背景画像ごとにbackground-origin を対応させる事ができます。
border-box + content-box
HTML code
<div class="bga bga4">border-box + content-box</div>CSS code
.bga4 { background-origin: border-box, content-box; }背景画像とbackground-originは同じ順番で対応しています。
対応する値を変えたり、他のプロパティと組み合わせる事で面白い表現が簡単に実現できます^^