背景画像を表示する基準位置を指定する「background-originプロパティ」の使用方法を記載
CSS3／2.1
対応ブラウザ
| 初期値 | 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 実行サンプル
Firefox 実行サンプル
edge 実行サンプル
opera 実行サンプル
コメント