CSS background-originプロパティ：背景画像の配置基準領域を指定

定義と使い方

background-origin 属性は、要素ボックスの背景画像をどの領域を基準として配置（ポジショニング）するかを指定します。
この属性の値である padding-box（パディングボックス）、border-box（ボーダーボックス）、content-box（コンテンツボックス）の中から一つを選択し、背景画像の配置基準（origin、開始点）となる領域として指定します。

background-origin 属性の値に関する用語の説明は、以下の通りです。

border-box： border（ボーダー）の外側の縁までの領域を意味します。
padding-box： padding（パディング）の外側の縁までの領域を意味します。
content-box：要素の実際の内容が配置される領域です。文字、画像、動画などがここに含まれます。これらコンテンツの外側の縁までの領域を意味します。padding（パディング）がある場合には、paddingの内側の領域となります。

基本例

デモCSS

div {
    aspect-ratio: 1.5;
    border: 10px dashed yellowgreen; /* border（ボーダー）の外側の縁までの領域が border-box です */
    padding: 30px; /* padding（パディング）の外側の縁までの領域が padding-box、
                     paddingの内側の領域が content-box です */
    background: #f2f2f2 url("earth.jpg") no-repeat;
    background-origin: padding-box; /* 初期値 */
}

div span { /* content-box（コンテンツボックス）のスタイリング */
    color: white;
    background-color: blue;
    display: block;
}

ご参考ください！
要素の背景（色や画像）は、常に border（ボーダー）の背面に描画されます。

コードの補足説明
aspect-ratio 属性は、要素のアスペクト比（幅に対する高さの比率、縦横比）を指定します。
デモのCSSにおける aspect-ratio: 1.5; は、横幅が高さの1.5倍となるような設定を意味します。

知っておきましょう！
background-origin 属性は、background-attachmentが fixedに設定されると無視されます。

形式構文

値

`background-origin` 属性の値
`border-box`	要素ボックスの `border-box`をポジショニングの基準領域として指定します。
`padding-box`	初期値です。要素ボックスの `padding-box`をポジショニングの基準領域として指定します。
`content-box`	要素ボックスの `content-box`をポジショニングの基準領域として指定します。

これらの値は、要素ボックスの Box modelを通じて確認することができます。

CSSのBox modelは、ウェブページで要素の構造とレイアウトを定義する概念です。各HTML要素は content（内容）、padding（パディング）、border（境界線）、margin（余白）で構成されています。これらの構成要素が箱の形をなしていることから「Box model」と呼ばれます。

構文

CSS

/* キーワード値 */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* グローバル値 */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

形式定義

background-origin属性の形式定義
初期値	`padding-box`
適用要素	すべての要素
継承	いいえ

例：2つのグラデーションを使用する

この例では、.boxに太い点線のボーダーがあります。最初のグラデーションは padding-box を背景の原点として使用するため、背景はボーダーの内側に配置されます。2番目は content-box を使用するため、コンテンツ領域にのみ表示されます。

CSSでのグラデーション実装は background-image 属性を使用します。したがって、background-origin 属性を適用できます。

CSS

.box {
    color: #fff;
    background-image: linear-gradient(
                        to right,
                        rgba(255, 0, 0, 0.5),
                        rgba(0, 0, 255, 0.5),
                        rgba(0, 128, 0, 0.5)
                      ),
                      radial-gradient(circle, gold, silver);
    border: 15px dashed yellowgreen;
    padding: 15px;
    background-origin: padding-box, content-box;
    background-repeat: no-repeat;
}