色・背景

「background-origin」プロパティ

「background-origin」プロパティは、背景画像や背景色の基準点を指定するCSSプロパティです。
背景画像をボックス要素に表示する基準位置を指定します。ボーダーを含めた要素の端を基準にしたり、ボーダーを除いた要素の内側の領域を基準にしたりすることができます。

本記事の内容

「background-origin」プロパティの値

背景画像や背景色の基準点を指定する値は「border-box」「padding-box」「content-box」などの値を指定することができます。
また、「background-origin」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。

【プロパティの種類】
・background-color
・background-image
・background-size
・background-repeat
・background-position
・background-attachment
・background-clip
・background-origin
CSSで文字や背景や枠線に色を指定する4つの指定方法

「background-origin」プロパティの指定方法

背景画像や背景色の基準点を指定する場合は、「background-origin」プロパティを使い適応する値を指定することで実装できます。

「background-origin」プロパティ
セレクタ{
background-origin:背景画像や背景色の基準点;
}
値例
/* 基本値 */
background-origin: border-box;/* ボーダーを含めた要素の端を基準にします。 */
background-origin: padding-box;/* ボーダーを除いた要素の内側の領域を基準 */
background-origin: content-box;/* ボックス内の余白を含まない、要素の内容領域を基準 */
表示例
ボーダーを含めた要素の端を基準（border-box）
ボーダーを除いた要素の内側の領域を基準（padding-box）
ボックス内の余白を含まない、要素の内容領域を基準（content-box）
«
»

おすすめの記事