背景画像の配置座標基準を設定するCSSプロパティ

CSS - background-origin

background-origin の概要

CSSプロパティ「background-origin」によって、背景の描画における座標空間の原点を設定できます。

各設定値の定義

「border-box」「padding-box」「content-box」の3種類の設定値があり、それぞれが座用空間の基準を下記のように定義します。

<div class="box border-box">座標の原点はボーダーの外縁。</div>
<div class="box padding-box">座標の原点はパディングの外縁。</div>
<div class="box content-box">座標の原点はコンテンツの外縁。</div>
<style>
.box{
  height: 50px;
  margin-bottom:10px;
  background-image: url(https://www-creators.com/wp-content/uploads/2017/10/santorini.jpg);
  padding: 20px;
  border: rgba(60, 40, 230, 0.3) solid 20px;
  background-repeat:no-repeat;
}
.box.border-box{
  background-origin: border-box;
}
.box.padding-box{
  background-origin: padding-box;
}
.box.content-box{
  background-origin: content-box;
}
</style>

CSSにおいて、通常の座標空間は要素の原点から右方向にX軸、下方向にY軸が形成されます。background-positionで絶対値を指定した場合、background-originでの原点が基準となります。

background-origin:border-box における座標原点
「background-origin: border-box」における座標原点

background-origin の値は、下記のキーワードによって設定されます。

説明
border-box背景描画における座標原点は、要素のボーダーの外側の縁に置かれます。初期値です。
padding-box背景描画における座標原点は、パディングの外側の縁に置かれます。
content-box背景描画における座標原点は、要素の内部(パディングより内側)の左上に置かれます。

仕様書

関連CSSプロパティ