

プロパティについて
#
概要
初期値 | “background-origin: padding-box;” |
適用対象 | すべての要素 |
継承 | しない |
パーセント値 | パーセント値は指定できません |
“background-origin”プロパティは“background-image”プロパティなどで指定された背景画像の配置領域を指定するプロパティです。“background-position”プロパティで背景画像の配置位置を指定するときに原点の位置に影響します。
“background-attachment”プロパティの値が“fixed”である場合は“background-origin”プロパティでの指定は無視され、背景画像の配置位置の基準はルート要素の外縁(通常はビューポート)となります。
サンプルコード
div { background-origin: border-box;}
#
#
複数の背景画像を指定する
“background-image”プロパティで複数の背景画像が指定されている場合、値を“,(カンマ)”で区切って記述することでそれぞれの背景画像の配置領域を指定することができます。値の順番は“background-image”プロパティで指定した値の順番に対応します。
div {
background-image: 〚一番手前の背景画像〛,〚手前から2番目の背景画像〛,〚手前から3番目の背景画像〛,...,〚一番奥の背景画像〛;
background-origin: 〚一番手前の背景画像の設定〛,〚手前から2番目の背景画像の設定〛,〚手前から3番目の背景画像の設定〛,...,〚一番奥の背景画像の設定〛;
}
#
使用例
#
#
#
#