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

background-origin

構文

値

形式文法

例

仕様書

ブラウザーの対応

関連情報