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

backgroundプロパティ

 backgroundプロパティは、背景画像に関する以下のプロパティを一括指定するプロパティです。

背景をgrayに(Exampleを参照
background: #f0f0f0;

 linear-gradient()関数radial-gradient()関数でグラデーションをかけることもできます。

背景をグラデーション化
background: linear-gradient(red 0% 30%, yellow 70% 100%);

 backgroundとlinear-gradient()関数の組み合わせでテキストにマーカーを引いたような装飾もできます。

マーカーのような装飾
span {
    background: linear-gradient(transparent 60%, #ff6 60%);
}

 テキストに下線や取り消し線を加えるには、text-decorationプロパティを使います。

構文(Syntax)

CSS

background: background-color background-image background-position background-size background-repeat background-origin background-clip background-attachment;

DOM(JavaScript)

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

値(Values)

Value摘要
background-color色の設定。CSSのColor設定が使える。
background-image画像の挿入。このプロパティでグラデーションをかけることができる。
background-position画像の配置位置。
background-size画像のサイズ。
background-repeat画像を繰り返し表示。デフォルトでは繰り返し表示する。
background-origin繰り返し表示を開始する位置の設定。
background-clip表示領域の設定。border、paddingから領域に含めるかを設定できる。
background-attachmentスクロールによるバックグランドの表示位置を変更できる。
linear-gradientグラデーションをかけることができる。
radial-gradient円形にグラデーションをかける。
initial初期値に戻す。
inherit親エレメントのプロパティを継承。

備考(Remarks)

Default valuebackgroundに関する各プロパティによる
Inherited(継承)no
Animatableyes、backgroundに関する各プロパティによる

Example

 backgroundの表示例です。ここでは簡単に背景色を"#f0f0f0"にしています。