background-origin プロパティ
background-origin プロパティは、背景画像の表示開始位置を指定する CSS のプロパティです。
指定できるのは、border、padding または content の左上端です。
content領域とはエレメントの内容が表示される領域です。
background-origin: content-box;
背景画像の設定は background プロパティ、background-image プロパティで指定します。
ページ内 Index
- ad -
構文(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-box | border領域も含めた左上が背景画像の開始位置。 |
| content-box | content領域の左上が背景画像の開始位置。 |
| initial | 初期値に戻す。 |
| inherit | 親エレメントのプロパティを継承。 |
備考（Remarks）
| 初期値（Default value） | 0% 0% |
| 継承（Inherited） | no |
| 変化（Animatable） | no |
Example
background-originの表示例です。背景の表示開始位置を指定できます。 ここでは内容の左上端が表示画像の繰り返し開始位置にしています。
- ad -
関連プロパティ
以下は関連するプロパティです。
| プロパティ名 | 概要 |
|---|---|
| background | バックグランドプロパティの一括指定 |
| background-attachment | スクロールによるバックグランドの表示位置 |
| background-blend-mode | 複数の背景画像や配色を混ぜ合わせる |
| background-clip | border、paddingを領域に含めるか |
| background-color | CSSのColorの指定 |
| background-image | 画像の挿入 |
| background-position | 画像の配置位置 |
| background-repeat | 画像の繰り返し（デフォルトは繰り返し） |
| background-size | 画像のサイズ |
| linear-gradient() | 線形グラデーション |
| radial-gradient() | 円形グラデーション |