CSS background property

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

background

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

書式

background: color image repeat attachment position
background: linear-gradient(color, color)

属性値

color
背景色を指定する。色は color プロパティ同様に指定するか、次の値の中から指定する。
背景色
説明
transparent 透明色(省略値)
inherit 継承
image
背景に使用する画像を指定します。
背景画像
意味
none 画像なし(規定値)
url(URL) URLで指定した画像を表示
inherit 継承

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

url(file:///C:/image/back.gif)
repeat
画像の並べ方を指定します。
背景画像の並べ方
意味
repeat 画像を縦横に並べる(省略値)
repeat-x 画像を横方向にのみ並べる
repeat-y 画像を縦方向にのみ並べる
no-repeat 画像を並べない
inherit 継承
attachment
画面をスクロールさせたときの背景画像の扱いを指定します。
背景画像のスクロール
意味
scroll 一緒にスクロールする(省略値)
fixed スクロールしない
inherit 継承
position-x
背景の横方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
position-x
意味
left 左端(省略値)
center 中央
right 右端
position-y
背景の縦方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
position-y
意味
top 上端(省略値)
center 中央
bottom 下端
body {
  background: transparent url(http://www.example.com/image/back.gif) repeat fixed left center;
}

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( , , )

background-image

スタイルシート属性 background-image は背景の画像を指定します。

書式

background-image: image

属性値

image
背景に使用する画像を指定します。
image
意味
none 画像なし(規定値)
url(URL) URLで指定した画像を表示
inherit 継承

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

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

background-imageの使用例

body {
  background-image: url(http://www.example.com/image/back.gif);
}

参考文献

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