CSS background

HTMLの背景に色や画像を指定するには、CSSプロパティ「background」を使います。画像をタイルのように繰り返し並べたり、スクロールに追随させることもできます。

スタイルシート属性 background は、背景の色や画像、スクロール方法、開始位置を指定します。

書式

background: color image position repeat attachment

background: linear-gradient(color, color)

属性値

color

背景色を指定する。色は color プロパティ同様に指定するか、次の値の中から指定する。

背景色

値	説明
transparent	透明色（省略値）
inherit	継承

body {
  background: transparent url(http://www.example.com/image/back.gif) repeat fixed left center;
}

背景色は background-color プロパティでも指定できる。

image

背景に使用する画像を指定します。

背景画像

値	意味
none	画像なし（規定値）
url(URL)	URLで指定した画像を表示
inherit	継承

ローカルファイルのURLを指定する場合は、次のように指定します。

url(file:///C:/image/back.gif)

背景画像は background-image プロパティでも指定できる。

position

背景の横方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。

position

値	意味
left	左端
center	中央
right	右端
top	上端
bottom	下端

背景画像の開始位置は background-position プロパティでも指定できる。

repeat

画像の並べ方を指定します。

背景画像の並べ方

値	意味
repeat	画像を縦横に並べる（省略値）
repeat-x	画像を横方向にのみ並べる
repeat-y	画像を縦方向にのみ並べる
no-repeat	画像を並べない
inherit	継承

画像の並べ方は background-repeat プロパティでも指定できる。

attachment

画面をスクロールさせたときの背景画像の扱いを指定します。

背景画像のスクロール

値	意味
scroll	一緒にスクロールする（省略値）
fixed	スクロールしない
inherit	継承

画面をスクロールさせたときの背景画像の扱いは background-attachment プロパティでも指定できる。

linear-gradient

background プロパティに linear-gradient 関数を使うと、背景色にグラデーションをつけることができる。グラデーションによる色の変化は、現在見えている範囲ではなく、ページ全体に及ぶ。そのため、ページ全体の大きさに対して、現在見えている範囲が狭い場合、色の変化が分かりにくい場合がある。

background: linear-gradient(color1, color2);

background: linear-gradient(deg, color1, color2);

deg

グラデーションの方向を指定する。

値	説明
to top	下(color1)から上(color2)
to bottom	上(color1)から下(color2)
to left	右(color1)から左(color2)
to right	左(color1)から右(color2)
45deg	45度（左下から右上）

背景色を選択すると、このページの背景画像が切り替わる。

background: linear-gradient( to top to bottom to left to right 45deg , white silver fuchsia lime yellow cyan , white silver fuchsia lime yellow cyan )

初期値

background: transparent none 0% 0% auto repeat scroll;

background で指定できる各プロパティの初期値を以下に示す。

適用先

全ての要素に対して background プロパティを指定できる。

参考文献

World Wide Web Consortium (2021) CSS Backgrounds and Borders Module Level 3