対応ブラウザ

初期値	padding-box
適用される要素	すべての要素
モジュール	CSS Backgrounds and Borders Module Level3及びLevel4
継承	なし

概要・使用方法

{ background-origin: 基準位置;}

「background-originプロパティ」は、背景画像をボックスに表示する基準位置を指定します。

background-originプロパティでの画像の配置指定を視覚的に有効にするには、background-repeatプロパティの値を「no-repeat」にする必要があります。

background-attachmentプロパティの値が「fixed」の場合、background-originプロパティの指定は無視されます。

指定できる基準位置

border-box	ボーダーを含めた要素の端を基準にします。
padding-box	ボーダーを除いた要素の内側の領域（パディング領域）を基準にします。
content-box	ボックス内の余白を含まない、要素の内容領域（コンテンツ領域）を基準にします。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
  <head>
    <title>background-originプロパティ CSSフォントサンプルページ</title>
    <meta charset="uft-8">
    <style>
          .disp{display:inline-block;margin:0.5em;}
          .border-box{
                    border:solid 50px rgba(255,255,0,0.5);
                    padding:1em;
                    color:red;
                    height:30em;
                    width:30em;
                    background-image:url("https://kcfran.com/sample/4006205_ss.jpg");
                    background-origin: border-box;
                    background-repeat: no-repeat;           
           }
           .padding-box{
                    border:solid 50px rgba(255,255,100,0.5);
                    padding:1em;
                    color:red;
                    height:30em;
                    width:30em;
                    background-image:url("https://kcfran.com/sample/4006205_ss.jpg");
                    background-origin: padding-box;
                    background-repeat: no-repeat;
           }
           .content-box{
                    border:solid 50px rgba(255,255,150,0.5);
                    padding:1em;
                    color:red;
                    height:30em;
                    width:30em;
                    background-image:url("https://kcfran.com/sample/4006205_ss.jpg");
                    background-origin: content-box;
                    background-repeat: no-repeat;
           }       
    </style>
  </head>
  <body>
      <div class="disp">
          <div class="border-box"><h1>border-box</h1><p>ボーダー領域を含めた位置に背景画像が配置されます</p></div>
          <div class="padding-box"><h1>padding-box</h1><p>ボーダー領域を除きパディング領域を含めた位置に背景画像が配置されます</p></div>
          <div class="content-box"><h1>content-box</h1><p>ボーダー領域を除きパディング領域も除いた位置に背景画像が配置されます</p></div>
      </div>
  </body>
</html>

実行結果