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

目次

background

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

書式

background: color image repeat attachment position

属性値

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;
}

background-color

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

書式

background-color: color

属性値

color
背景色を指定します。色はスタイルシート属性colorと同様に指定するか、次の値の中から指定します。
説明
transparent 透明色(省略値)
inherit 継承

スタイルシート属性 background-color の使用例と表示サンプルを示します。表示結果はブラウザによって異なることがあります。

<p>背景の<span style="background-color: silver">色を指定</span>します。</p>

背景の色を指定します。

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);
}

background-repeat

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

書式

background-repeat: repeat

属性値

repeat
画像の並べ方を指定します。
repeat
意味
repeat 画像を縦横に並べる(省略値)
repeat-x 画像を横方向にのみ並べる
repeat-y 画像を縦方向にのみ並べる
no-repeat 画像を並べない
inherit 継承

background-repeatの使用例

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

background-attachment

スタイルシート属性 background-attachment は画面をスクロールさせたときの背景画像の扱いを指定します。

書式

background-attachment: attachment

属性値

attachment
画面をスクロールさせたときの背景画像の扱いを指定します。
意味
scroll 一緒にスクロールする(省略値)
fixed スクロールしない
inherit 継承

background-attachmentの使用例

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

background-position

スタイルシート属性 background-position は背景の開始位置を指定します。

書式

background-position: position-y position-x

属性値

position-y
背景の縦方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
意味
top 上端(省略値)
center 中央
bottom 下端
position-x
背景の横方向の開始位置を指定します。10%のように割合で指定するか、次の値の中から選びます。
意味
left 左端(省略値)
center 中央
right 右端

background-imageの使用例

body要素の背景として、中央に画像を配置する。

body {
  background-image: url(http://www.example.com/image/back.gif);
  background-attachment: fixed;
  background-position: center center;
}
SEO [PR] 爆速!無料ブログ 無料ホームページ開設 無料ライブ放送