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

background プロパティ

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

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

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

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

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

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

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

ページ内 Index

background プロパティについて

　背景は padding との組み合わせで効果的に使用することができます。

　padding プロパティは内容の周りに余白を設けるものの背景画像は border の範囲まで表示されます。
　エレメント全体に背景画像を表示したい場合は margin より padding プロパティを使うべきです。

padding プロパティと背景

内容は padding より中に表示されますが、背景は border まで表示されます。
margin には背景が表示されません。

　上記の例は、margin、border、padding を表示しています。

　背景は border の範囲まで表示されます。ただし、問題があって上記の例から分かるように背景画像が全体からズレています。
　背景の位置を background-origin で調整したり、背景の表示範囲を background-clip で指定するといった対処が必要になります。

　以下は背景の表示開始位置を border-box に指定してあります。

padding プロパティと背景

内容は padding より中に表示されますが、背景は border まで表示されます。
margin には背景が表示されません。

構文(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"にしています。

関連（Related）