background-origin

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

試してみましょう

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

構文

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

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

background-origin プロパティは、以下の一覧にあるキーワード値のうちの一つで指定します。

値

border-box

背景は境界ボックスからの相対位置になります。

padding-box

背景はパディングボックスからの相対位置になります。

content-box

背景はコンテンツボックスからの相対位置になります。

公式定義

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

形式文法

background-origin = 
  <box>#  

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

例

背景画像の原点を設定

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

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

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

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

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

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

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

仕様書

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-origin

ブラウザーの互換性

BCD tables only load in the browser

関連情報