background-origin

CSS の background-origin プロパティは、背景配置領域を設定します。言い換えれば、 background-image プロパティで指定された画像の原点の位置を設定します。

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

メモ: background 一括指定プロパティは、該当する値を設定しなかった場合、このプロパティの値を初期値にリセットします。

構文

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

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

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

値

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

形式文法

<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'); /* 背景に二つの画像を適用 */
  background-position: top right, 0px 0px;
  background-origin: content-box, padding-box;
}

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background-origin の定義		 勧告候補 初回定義

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

ブラウザーの対応

BCD tables only load in the browser

関連情報