CSS辞典 background-originプロパティの解説

css辞典 CSS辞典
この記事は約8分で読めます。

背景画像を表示する基準位置を指定する「background-originプロパティ」の使用方法を記載

CSS3/2.1

対応ブラウザ

ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:chrome
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:firefox
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:safari
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms edge
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:ms ie
ruby要素,rb要素,rt要素、rp要素、rtc要素 対応ブラウザ:opera
初期値 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>
実行結果

border-box

ボーダー領域を含めた位置に背景画像が配置されます

padding-box

ボーダー領域を除きパディング領域を含めた位置に背景画像が配置されます

content-box

ボーダー領域を除きパディング領域も除いた位置に背景画像が配置されます

chrome 実行サンプル

background-originプロパティのchromeブラウザの実行結果

Firefox 実行サンプル

background-originプロパティのfirefoxブラウザの実行結果

edge 実行サンプル

background-originプロパティのedgeブラウザの実行結果

opera 実行サンプル

background-originプロパティのoperaブラウザの実行結果

コメント

タイトルとURLをコピーしました