![[CSS]要素の背景をスタイリングするプロパティ](https://techmemo.biz/wp-content/uploads/2012/11/N785_yuuguredokitohansyasitasuimen500-thumb-749x500-2173.jpg "[CSS]要素の背景をスタイリングするプロパティ")
背景をスタイリングするためのCSSについて書きたいと思います。
背景のスタイルを指定するプロパティには、以下のようなものがあります。
- background-color
- background-image
- background-repeat
- background-position
- background-attachment
background-color
background-colorは、背景の色を指定するプロパティです。値には、redやblue等色の名前を入れるか、カラーコードを指定します。
body{
background-color:white;
}
background-image
background-imageは、背景画像を指定するプロパティです。以下のように”url(背景画像のパス)”といった形式でスタイルシートに記述します。
body{
background-image:url(image.jpg);
}
background-repeat
background-repeatは、背景画像の繰り返しを指定するプロパティです。使える値は、以下のようになっています。
repeat：縦横に背景画像を繰り返して表示
repeat-x：横方向にのみ背景画像を繰り返して表示
repeat-y：縦方向にのみ背景画像を繰り返して表示
no-repeat：背景画像を一回だけ表示
body{
background-image:url(image.jpg);
background-repeat:repeat-x;
}
background-position
background-positionは、背景画像の場所を指定するプロパティです。位置の指定方法は3通りあって、それぞれ半角スペースで区切って、”横の位置”スペース”縦の位置”というように指定します。
数値：ピクセルで横と縦の位置を指定します。（例）background-position:15px 15px;
%：パーセンテージで横と縦の位置を指定します。（例）background-position:50% 50%;
キーワード：場所を示すキーワードで横と縦の位置を指定します。（例）background-position:left bottom;
body{
background-image:url(image.jpg);
background-position:100px 100px;
}
background-attachment
background-attachmentは、スクロール時の背景画像の動きを指定します。値にはfixedとscrollが指定できます。
fixed：背景画像の位置が固定され、スクロールしても動かない
scroll：スクロールすると、背景画像も移動する
body{
background-image:url(image.jpg);
background-attachment:scroll;
}
プロパティをひとまとめに・・・
背景のスタイルは、”background”というプロパティでまとめて指定することができます。値はそれぞれ半角スペースで区切って記述すればOKです。また、指定しなくていい値は、書かなければ指定なしとなります。
body{
background:#FFFFFF url(image.jpg) repeat-x 100px 100px scroll;
}
背景のスタイルは工夫するとかなり柔軟な対応ができるようになります。WEBページ全体の背景だけでなく、pやdiv等の細かい要素にも背景をつけることができますので、色々と試してみてください。