【CSS Modules】background-originプロパティの使い方

background-originプロパティは、要素の背景画像がどの領域を基準として配置されるかという情報を保持するプロパティです。このプロパティを使用することで、CSSのボックスモデルにおけるコンテンツ領域、パディング領域、またはボーダー領域のいずれかを、背景画像の左上隅の基準点として設定できます。これは、背景画像の位置を調整するbackground-positionプロパティと密接に関連しており、background-originがbackground-positionが計算される際の原点を定義します。

このプロパティの主な値として、『padding-box』があります。これは要素のパディング（内側の余白）を含む領域を基準点とし、背景画像はパディングボックスの左上隅から描画が始まります。次に、『border-box』は要素のボーダー（境界線）を含む領域を基準点とします。この値が指定されると、背景画像はボーダーボックスの左上隅から描画が始まり、ボーダーの下に隠れる形で配置されることもあります。さらに、『content-box』は要素のコンテンツ（内容）のみの領域を基準点とします。背景画像はコンテンツボックスの左上隅から描画が始まり、パディングやボーダーがある場合はそれらの内側に配置されます。

このようにbackground-originプロパティを適切に設定することで、ウェブページのデザインにおいて、背景画像の見た目をより細かく制御し、意図通りのレイアウトを実現することが可能になります。

Copy
1.element {
2  background-origin: content-box;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません