備忘録的プログラミングリファレンス

background-originプロパティ

 background-originプロパティは、背景画像の表示開始位置を指定するプロパティで、border、padding、content領域の左上が開始位置になります。
 content領域とはエレメントの内容が表示される領域です。

背景画像の表示開始位置を内容の左上端に(Exampleを参照
background-origin: content-box;

 開始位置の指定としては、padding領域を含めたの左上、border領域を含めた左上、content領域の左上があります。

 背景画像の設定はbackgroundプロパティbackground-imageプロパティで指定します。

関連プロパティ

 以下は関連するプロパティです。

プロパティ名概要
backgroundバックグランドプロパティの一括指定
background-attachmentスクロールによるバックグランドの表示位置
background-blend-mode複数の背景画像や配色を混ぜ合わせる
background-clipborder、paddingを領域に含めるか
background-colorCSSのColorの指定
background-image画像の挿入
background-position画像の配置位置
background-repeat画像の繰り返し(デフォルトは繰り返し)
background-size画像のサイズ
linear-gradient()線形グラデーション
radial-gradient()円形グラデーション

構文(Syntax)

CSS

background-origin: padding-box | border-box | content-box;

DOM(JavaScript)

値の取得
String=object.style.backgroundOrigin
値の設定
object.style.backgroundOrigin="_value_" 

値(Values)

Value摘要
padding-box初期値(default value)。padding領域も含めた左上が背景画像の開始位置。
border-boxborder領域も含めた左上が背景画像の開始位置。
content-boxcontent領域の左上が背景画像の開始位置。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

初期値(Default value)0% 0%
継承(Inherited)no
変化(Animatable)no

Example

 background-originの表示例です。背景の表示開始位置を指定できます。 ここでは内容の左上端が表示画像の繰り返し開始位置にしています。