background-colorプロパティ

background-colorプロパティは、適用する要素に背景色を指定します。値は、RGB値、またはカラーネームで指定します。

例)

background-color: #dcdcdc;

background-imageプロパティ

background-imageプロパティは、適用する要素に背景画像を指定します。値は、背景画像までのパスとファイル名で指定します。背景色と、背景画像を同時に指定した場合、背景画像プロパティが優先されます。

例)

background-image: url(abc.jpg);

背景画像を指定した場合、訪問者のブラウジング環境により、指定が反映されない事もありますので、背景画像に使用している画像に似た色を背景色に指定すると良いでしょう。


background-repeatプロパティ

background-repeatプロパティは、background-imageプロパティで背景画像を表示する場合に、その背景画像の繰り返し方法を指定します。この指定しない場合は通常、縦横方向の繰り返し表示となります。

値)

  • repeat (縦横方向の繰り返し)
  • repeat-x (横方向の繰り返し)
  • repeat-y (縦方向の繰り返し)
  • no-repeat (繰り返しを行わない。画像の単独表示)

例)

background-repeat: repeat-x;

background-attachmentプロパティ

background-attachmentプロパティは、画面スクロール時に背景画像の固定を、「する」、「しない」を指定します。背景画像を固定した場合、スクロールバーを動かしても背景画像は動きません。

値)

  • scroll (背景画像を固定しない)
  • fixed (背景画像を固定する)

例)

background-attachment: fixed;

background-positionプロパティ

background-positionプロパティは、背景画像の表示開始位置を指定します。値は単位(px)をつけた数値、パーセンテージ値、キーワードで指定します。また、横、縦方向の順で、半角スペースで区切って記述します。値をひとつだけ指定した場合、その値は、横方向に適用され、縦方向は50%を指定した値になります。

キーワード)

  • left (横方向、左揃え)
  • right (横方向、右揃え)
  • center (縦、横方向、中央揃え)
  • top (縦方向、上揃え)
  • bottom (縦方向、下揃え)

キーワードは、right bottom、left topのように、横、縦方向を組み合わせて指定できます。

例)

body{
background-image: url(abc.jpg);
background-repeat: no-repeat;
background-position: 0% 0%;

パーセンテージ値 / キーワード値)

  • 0% 0% / left top
  • 50% 0% / center top
  • 100% 0% / right top
  • 0% 50% / left center
  • 50% 50% / center center
  • 100% 50% / right center
  • 0% 100% / left bottom
  • 100% / center bottom
  • 100% 100% / right bottom

backgroundプロパティ

backgroundプロパティは、背景色や、背景画像などの背景に関する プロパティをまとめて指定できます。

まとめ指定が可能な背景に関するプロパティ)

上記5種類のプロパティの値の、必要でない値は省略できます。省略された値は各プロパティの初期値(デフォルト値)が適用され、各プロパティの値は、半角スペースで区切って記述します。

例)

background: #eeeeee url(abc.jpg) no-repeat 100% 0%;