CSS【 background 】6～background-clip、background-origin

背景に関するプロパティの中に、背景の適用範囲を指定するbackground-clipプロパティと、背景の基準位置を指定するbackground-originプロパティがあります。
今回は、このbackground-clipプロパティとbackground-originプロパティについてまとめたいと思います。

背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1～背景プロパティの種類とbackground-color
CSS【 background 】2～background-imageでレイヤーやグラデーションも
CSS【 background 】3～background-repeat、background-attachment
CSS【 background 】4～background-position
CSS【 background 】5～background-size
CSS【 background 】6～background-clip、background-origin（本ページ）
CSS【 background 】7～背景に関するショートハンドプロパティ

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

1. background-clipプロパティ

background-clipプロパティは、背景の適用範囲を指定する際に使用するプロパティです。

background-clipプロパティで指定する値は、次の通りです。

border-box	デフォルト値 ボーダー領域に背景を表示する
padding-box	パディング領域に背景を表示する
content-box	コンテント領域に背景を表示する

　
background-clipプロパティの値は、継承されません。
また、background-clipプロパティは、全ての要素で使用できます。

background-clipプロパティとbackground-originプロパティの値は、同じで、上記の３つのキーワードです。

background-originプロパティが、背景をどの領域から表示させるかという基準位置を指定するプロパティであるのに対して、background-clipプロパティは、背景をどの領域まで表示させるかという、範囲を指定するプロパティです。

background-clipプロパティに、border-box、padding-box、content-boxをそれぞれ指定してみます。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:300px;
	height:180px;
	border:10px dashed rgba(210,60,240,1);
	padding:10px;
	font-weight:bold;
	color:white;
	background-color:#F9C;
	background-image:url(img/terrace.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-clip:border-box;}
div#sample p:nth-child(2) {background-clip:padding-box;}
div#sample p:nth-child(3) {background-clip:content-box;}

<!-- HTMLファイル -->
<div id="sample">
<p>border-box（デフォルト）</p>
<p>padding-box</p>
<p>content-box;/p>
</div>

border-boxを指定した一番上の表示について、背景色（#F9C:ピンク）はボーダーの背景にも表示されていますが、画像はpadding領域から表示されています。
これは、background-origin（画像を表示する基準位置）のデフォルト値がpadding-boxであることが原因です。

▲目次へ戻る

2. background-originプロパティ

background-originは、画像をどこから表示させるかという基準位置を指定する際に使用するプロパティです。

background-originプロパティで指定する値は、background-clipプロパティと同じで、次の通りです。

border-box	ボーダーの境界が基準位置となる
padding-box	デフォルト値 パディングの境界が基準位置となる
content-box	コンテントの境界が基準位置となる

　
background-originプロパティの値は、継承されません。
また、background-originプロパティは、全ての要素で使用できます。

background-clipプロパティが、背景をどの領域まで表示させるかという範囲を指定するプロパティであるのに対して、background-originプロパティは、背景をどの領域から表示させるかという基準位置を指定するプロパティです。

background-originプロパティに、border-box、padding-box、content-boxをそれぞれ指定してみます。

　
ソースは次の通りです。

<!-- CSSファイル -->
div#sample {margin:0; padding:0;}
div#sample p {
	width:300px;
	height:180px;
	border:10px dashed rgba(210,60,240,1);
	padding:10px;
	font-weight:bold;
	color:white;
	background-color:#F9C;
	background-image:url(img/terrace.jpg);
	background-repeat:no-repeat;}
div#sample p:nth-child(1) {background-origin:border-box;}
div#sample p:nth-child(2) {background-origin:padding-box;}
div#sample p:nth-child(3) {background-origin:content-box;}

<!-- HTMLファイル -->
<div id="sample">
<p>border-box</p>
<p>padding-box（デフォルト）</p>
<p>content-box;/p>
</div>

基準位置（画像の左上の位置）が、background-originプロパティで指定した各領域の左上の境界となっています。

▲目次へ戻る