CSS - background-origin

概要

属性名	background-origin
値	<box>[, <box>]*
値の詳細	<box> = border-box \| padding-box \| content-box
初期値	padding-box
適用可能要素	すべての要素
継承	継承しない
メディア	visual
アニメーション	不可

サポート (説明)

CSS	IE/Edge	Firefox	Chrome	Opera	Safari
CSS3	9.0	4.0	1.0	10.5	3.0

説明

背景画像を表示する際の基準位置を指定します。

値	説明
border-box	ボーダーの右上を基準位置とする。
padding-box	パディングの右上を基準位置とする。
content-box	コンテンツの右上を基準位置とする。

使用例

CSS

.test {
  width: 100px;
  height: 50px;
  padding: 10px;
  border: 10px solid rgba(20, 20, 20, 0.4);
  background-image: url(./image/back.gif);
  background-repeat: no-repeat;
}
.test-border-box {
  background-origin: border-box;
}
.test-padding-box {
  background-origin: padding-box;
}
.test-content-box {
  background-origin: content-box;
}

HTML

<h5>border-box</h5>
<div class="test test-border-box">こんにちは</div>
<h5>padding-box</h5>
<div class="test test-padding-box">こんにちは</div>
<h5>content-box</h5>
<div class="test test-content-box">こんにちは</div>

表示

border-box

こんにちは

padding-box

こんにちは

content-box

こんにちは

リンク

初版：1997年7月27日、最終更新：2015年11月29日

https://www.tohoho-web.com/css/prop/background-origin.htm

CSS - background-origin

概要

サポート (説明)

説明

使用例

border-box

padding-box

content-box

関連項目

リンク