background-origin プロパティは、背景画像の表示位置の基準点を指定するプロパティです。
背景画像は、標準ではパディングを含めた左上を基準点「0 0」として表示されますが、background-originプロパティを利用すると罫線やコンテンツ部分の左上を基点にすることができます。
background-attachmentプロパティの値にfixedが指定されている場合には、background-originプロパティの指定は無効となります。
次の例は、background-origin 値に padding-box を指定しています。
値に padding-box が指定された場合、背景をパディングボックスに対して相対的に適用します。背景画像はパディングを含めた左上を基準にして表示されます。
.background-origin-padding {
padding: 20px;
background-image: url("images/grid.gif");
background-repeat: no-repeat;
background-origin: padding;
-moz-background-origin: padding; /* Firefox用 */
-webkit-background-origin: padding; /* Safari,Google Chrome用 */
-o-background-origin: padding; /* Opera用 */
border: dashed 10px #666;
}
値に padding-box が指定された場合の表示サンプルです。
値に padding-box が指定された場合、背景をパディングボックスに対して相対的に適用します。背景画像はパディングを含めた左上を基準にして表示されます。
次の例は、background-origin 値に border-box を指定しています。
値に border-box が指定された場合、背景をボーダーボックスに対して相対的に適用します。背景画像はボーダーを含めた左上を基準にして表示されます。
.background-origin-border {
padding: 20px;
background-image: url("images/grid.gif");
background-repeat: no-repeat;
background-origin: border;
-moz-background-origin: border; /* Firefox用 */
-webkit-background-origin: border; /* Safari,Google Chrome用 */
-o-background-origin: border; /* Opera用 */
border: dashed 10px #666;
}
値に border-box が指定された場合の表示サンプルです。
値に border-box が指定された場合、背景画像をボーダーボックスに対して相対的に適用します。背景はボーダーを含めた左上を基準にして表示されます。
次の例は、background-origin 値に content-box を指定しています。
値に content-box が指定された場合、背景をコンテントボックスに対して相対的に適用します。背景画像はパディングを含めず左上を基準にして表示されます。
.background-origin-content {
padding: 20px;
background-image: url("images/grid.gif");
background-repeat: no-repeat;
background-origin: content;
-moz-background-origin: content; /* Firefox用 */
-webkit-background-origin: content; /* Safari,Google Chrome用 */
-o-background-origin: content; /* Opera用 */
border: dashed 10px #666;
}
値に content-box が指定された場合の表示サンプルです。
値に content-box が指定された場合、背景をコンテントボックスに対して相対的に適用します。背景画像はパディングを含めず左上を基準にして表示されます。
Post your comment