background-origin

Baseline 広く利用可能

この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2015年7月以降、すべてのブラウザーで利用可能です。

もっと詳しく
完全な互換性情報を見る

background-origin は CSS のプロパティで、背景配置領域を境界の開始位置、境界の内部、パディングの内部から設定します。

background-attachment が fixed のときは background-origin が無視されることに注意してください。

試してみましょう

background-origin: border-box;
background-repeat: no-repeat;

background-origin: padding-box;
background-repeat: no-repeat;

background-origin: content-box;
background-repeat: no-repeat;

<section id="default-example">
 <div id="example-element">これは要素のコンテンツです。</div>
</section>

#example-element {
 background-image: url("/shared-assets/images/examples/leopard.jpg");
 color: #d73611;
 text-shadow: 2px 2px black;
 padding: 20px;
 border: 10px dashed #333333;
 font-size: 2em;
 font-weight: bold;
}

構文

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 プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

値

border-box: 背景は境界ボックスからの相対位置になります。
padding-box: 背景はパディングボックスからの相対位置になります。デフォルト値です。
content-box: 背景はコンテンツボックスからの相対位置になります。

公式定義

初期値	`padding-box`
適用対象	すべての要素。 `::first-letter`および`::first-line` にも適用されます。
継承	なし
計算値	指定通り
アニメーションの種類	反復可能リスト

形式文法

background-origin = 
 <visual-box># 

<visual-box> = 
 content-box | 
 padding-box | 
 border-box

例

背景画像の原点を設定

css

.example {
 border: 10px double;
 padding: 10px;
 background: url("image.jpg");
 background-position: center left;
 background-origin: content-box;
}

css

#example2 {
 border: 4px solid black;
 padding: 10px;
 background: url("image.gif");
 background-repeat: no-repeat;
 background-origin: border-box;
}

css

div {
 background-image:
 url("logo.jpg"), url("main-back.png"); /* 背景に 2 つの画像を適用 */
 background-position:
 top right,
 0px 0px;
 background-origin: content-box, padding-box;
}

2 つのグラデーションの使用

この例では、ボックスに太い点線の境界線が付いています。最初のグラデーションでは、 padding-box を background-origin として使用しているため、背景は境界線の内側に表示されます。2 つ目のグラデーションは、content-boxを使用しているため、コンテンツの後ろにのみ表示されます。

css

.box {
 margin: 10px 0;
 color: white;
 background:
 linear-gradient(
 90deg,
 rgb(131 58 180 / 100%) 0%,
 rgb(253 29 29 / 60%) 60%,
 rgb(252 176 69 / 100%) 100%
 ),
 radial-gradient(circle, white 0%, black 28%);
 border: 20px dashed black;
 padding: 20px;
 width: 400px;
 background-origin: padding-box, content-box;
 background-repeat: no-repeat;
}

html

<div class="box">Hello!</div>

[フレーム]

仕様書

仕様書
CSS Backgrounds and Borders Module Level 3 # background-origin

ブラウザーの互換性

MDN の改良に協力

協力方法を知る

このページは MDN の貢献者によって 2025年12月9日に最終更新されました。

GitHub でこのページを表示 • このコンテンツに関する問題を報告