SYNCERのロゴ
アイキャッチ画像

background-origin - 背景の原点

background-originは、背景の描画が開始される原点を指定するプロパティです。

概要

名前
background-origin
<box>#
<box> = border-box | padding-box | content-box
初期値
padding-box
適用対象
全ての要素。
継承
しない。
パーセンテージ
N/A
メディア
visual
計算値
as specified
アニメーションの可否
N/A
仕様書
https://drafts.csswg.org/css-backgrounds-3/#the-background-origin

チュートリアル

下記のリストから値を指定できます。複数指定するにはコンマ(,)で区切って下さい。

border-box
枠線の左上。
padding-box
初期値。枠内余白の左上。
content-box
コンテンツの左上。
div {
	background-origin: border-box ;
}

デモ

背景画像の原点の位置がそれぞれ違っているのを確認しましょう。

<!-- このコードは編集できます。 -->

<!DOCTYPE html>
<html>
<head>
<style>
div {
	background-image: url(./image.png) ;
	padding: 25px ;
	border: 25px dashed #000 ;
	color: #fff ;
	margin: 24px 0 ;
	min-height: 200px ;
}

#border-box {
	background-origin: border-box ;
}

#padding-box {
	background-origin: padding-box ;
}

#content-box {
	background-origin: content-box ;
}
</style>
</head>
<body>
	<p>border-box</p>
	<div id="border-box"></div>
	<hr>
	<p>padding-box</p>
	<div id="padding-box"></div>
	<hr>
	<p>content-box</p>
	<div id="content-box"></div>
</body>
</html>

サポート状況

ChromeFirefoxSafariEdgeIEOperaiOS SafariAndroid
×××××確認中×確認中
  • Twitterでシェア
  • Facebookでシェア
  • Google+でシェア
  • はてなブックマークでシェア
  • pocketに保存
  • LINEでシェア
更新履歴
2017年11月4日 (土)
コンテンツを公開しました。