CSS - background-origin

トップ > CSSリファレンス > background-origin

概要

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

サポート (説明)

CSSIE/EdgeFirefoxChromeOperaSafari
CSS39.04.01.010.53.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
こんにちわ

関連項目

background, background-color, background-image, background-repeat, background-attachment, background-position, background-clip, background-origin, background-size

リンク


Copyright (C) 1997-2015 杜甫々
初版:1997年7月27日、最終更新:2015年11月29日
http://www.tohoho-web.com/css/prop/background-origin.htm