値	意味	例
カラーコードによる指定	「#」に続けて、16進数6桁で光の三原色（RGB）の組み合わせを表記したもの。	#777777 #A9A9A9 #FFFFFF
カラーネームによる指定	主要なカラーコードに名前をつけたもの。	red pink lightpink orange tomato

解説

RGBの組み合わ

16進数表記する場合

「#」に続けて16進数6桁で表記します。

R、G、B、それぞれは16進数2桁で表現します。00〜FFまでの値です。それを6桁で組み合わせた色が背景色になります。「#」に続く値が3桁の場合は、1桁の値を2つ並べたものと解釈されます。

10進数表記する場合

光の三原色RGBを10進数で指定します。rgbというキーワードを使います。カッコの中にはRGBを「,」カンマ区切りの10進数で表記します。

16進数の66は10進数で102です。
CCは204です。
FFは255です。

これを混ぜると水色になります。以下のように記述します。

透明度を指定する場合

rgba（アルファ）というキーワードを使います。

4つ目のα（アルファ）の部分に透明度を指定することができます。1がぬり100％で、完全に不透明です。値を小さくしていくと透明度が高くなります。0に近づくほど透明になることを意味します。

background-image

コンテンツの背景画像を指定するプロパティです。

主要な値

値	意味	例
url(画像ファイル)	url()の引数に背景画像のファイルパスを指定する。	url(../img/bg.png)

解説

url(画像ファイル名)の形式で指定します。画像ファイルが、スタイルシートと同じフォルダに保存されている場合には、ファイル名を指定します。

背景に指定する画像ファイルが、スタイルシートと同じディレクトリに存在しない場合、例えば "img" というフォルダ内にある場合は、ファイル名だけを記述してもその場所が分からないため、どこにあるかまで明確に記述する必要があります。この場所まで含めて記述する形式を「パス」と呼びます。

画像を指定しない場合は、noneと書きます。

JavaScriptで画面を操作する際などに使います。一度、背景画像を指定した後に、それをなしにするような場合に使用します。

background-repeat

コンテンツの背景画像の繰り返しのパターンを指定するプロパティです。

主要な値

値	意味	例
repeat-x	横方向に繰り返す。
repeat-y	縦方向に繰り返す。
repeat	縦横に繰り返す。
no-repeat	繰り返さない。

解説

横方向のみ背景画像を繰り返して表示します。

縦方向のみ繰り返します。

横方向にも縦方向にも繰り返します。

繰り返ししません。

background-position

コンテンツの背景画像の表示位置を指定するプロパティです。値の指定方法はいくつかありますが、一般的には2つの値を指定することが多いです。

主要な値

値	意味	例
キーワードでの指定	位置を表すキーワード	top left bottom right
% 値での指定	相対位置を、横、縦の順番に%で指定する。画像の指定された位置を、コンテンツの指定された位置に配置する。
pxでの指定	基点からの距離を、横、縦の順番にpxで指定する。

解説

キーワードでの指定

キーワードを使用して、縦の位置と左右の位置を指定します。

背景画像はコンテンツの上寄せ、左寄せになります。

背景画像はコンテンツの下寄せ、右寄せになります。

どちらか片方を指定しない場合は、center（中央揃え）になります。

% 値での指定

相対位置を指定します。指定された画像の位置が、コンテンツの指定された位置に表示されます。水平位置と垂直位置の順番で値を指定します。x座とy座標を指定するような感じです。

画像の0% 0%の位置が、コンテンツの0% 0%の位置に表示されます。

画像の50% 50%の位置（中心）が、コンテンツの50% 50%の位置（中心）に表示されます。

画像の100% 100%の位置が、コンテンツの100% 100%の位置に表示されます。

px 値での指定

絶対値を指定します。左からの位置と上からの位置を指定します。コンテンツの左上の角が基準となります。基点と言います。

左からの位置が20px、上からの位置が30pxになります。

background-size

コンテンツの背景画像のサイズを指定するプロパティです。

主要な値

値	意味	例
contain	縦横比は維持したまま、画像ができるだけ大きくなるように表示する。
cover	縦横比を維持したまま、縦も横も覆うように表示される。はみ出した部分は切り落とされる。
auto	画像サイズそのままで表示される。
px での指定	画像サイズを絶対値で表示する。
% 値での指定	背景領域に対する割合を指定する。