Background(背景)

[CSS] background-origin

この記事は最終更新から２年以上経過しており、内容が古い可能性があります

CSS の background-origin は、 背景画像を表示する領域 (起点)を設定するプロパティ。positionと組み合わせる事で、表示位置を調整する事も可能です。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

同じテーマの記事
このページの目次
  1. background-origin の詳細
    1. 利用できる値
    2. ブラウザ対応状況 (2020/07 現在)

background-origin Code DEMO

  • 共通code background-image: url(img/cat.jpg);
    background-repeat; no-repeat;
    border: dashed 10px #000;
    padding: 15px;

他の値を持つ場合があります。詳細は以下をご確認下さい

background-origin の詳細

利用できる値

境界ボックス
border-box

背景は「 borderの外側 」からの相対位置

パディングボックス
padding-box

背景は「 paddingの外側 (= borderの内側)」からの相対位置

コンテンツボックス
content-box

背景は「 内容の外側 (= paddingの内側)」からの相対位置

background-origin の複数指定

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景画像ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png); 
background-origin: border-box, content-box;

background-origin 設定時の注意

  • background-originとbackground-positionを一緒に指定した場合、background-originで指定した位置の左上がpositionの起点となります。
  • background-attachment: fixed; の場合、background-originは無視されます。
  • background-originは背景画像のみ適用。背景色には適用されません。

ブラウザ対応状況 (2020/07 現在)

  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇
  • 〇

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m

同じテーマの記事