このウェブサイトはご利用の端末での閲覧に対応していません。
This website does not support your device.

background-origin:背景画像の配置領域CSS3で追加

記事Feb. 13th,2021
背景画像の配置領域を指定するプロパティ
この記事はCSS3に対応しています。
この記事はCSS3に対応しています。

プロパティについて

概要

初期値 background-origin: padding-box;
適用対象 すべての要素
継承 しない
パーセント値 パーセント値は指定できません

background-origin”プロパティはbackground-image”プロパティなどで指定された背景画像の配置領域を指定するプロパティです。background-position”プロパティで背景画像の配置位置を指定するときに原点の位置に影響します。

background-attachment”プロパティの値が“fixed”である場合は“background-origin”プロパティでの指定は無視され、背景画像の配置位置の基準はルート要素の外縁(通常はビューポート)となります。

サンプルコード

div { background-origin: border-box;}

説明
padding-box 背景画像の表示位置はパディング・ボックスを基準とします
border-box 背景画像の表示位置はボーダー・ボックスを基準とします
content-box 背景画像の表示位置はコンテント・ボックスを基準とします
CSSのボックスモデル

複数の背景画像を指定する

background-image”プロパティで複数の背景画像が指定されている場合、値を“,(カンマ)”で区切って記述することでそれぞれの背景画像の配置領域を指定することができます。値の順番はbackground-image”プロパティで指定した値の順番に対応します。

div {
background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-origin: 〚一番手前の背景画像の設定〛,〚手前から2番目の背景画像の設定〛,〚手前から3番目の背景画像の設定〛,...,〚一番奥の背景画像の設定〛;
}

仕様書

Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
background-origin
定義なし

定義なし

定義あり
Level 1 Level 2 Level 3
勧告(REC) 勧告(REC) 勧告候補(CR)
padding-box
定義なし

定義なし

定義あり
border-box
定義なし

定義なし

定義あり
content-box
定義なし

定義なし

定義あり

使用例

パディング・ボックスを基準とする

div {
padding: 10px;
border: 10px dotted;
background-repeat: no-repeat;
background-origin: padding-box;
}

ボーダー・ボックスを基準とする

div {
padding: 10px;
border: 10px dotted;
background-repeat: no-repeat;
background-origin: border-box;
}

コンテンツ・ボックスを基準とする

div {
padding: 10px;
border: 10px dotted rgb(204,153,204);
background-repeat: no-repeat;
background-origin: content-box;
}

複数の背景画像を指定する

div {
padding: 10px;
border: 10px dotted rgb(204,153,204);
background-image: url(sample/background_sample.png), url(background_sample2.png);
background-repeat: no-repeat;
background-origin: border-box,content-box;
}
一番上へ
トップにもどる
シェアする
シェアする
Facebookでシェアする
ツイート
Google+でシェア
Pocket
はてなブックマーク