今回は、CSSで背景色をつけたり、背景画像を挿入したりする方法を紹介します。
background-color
background-colorは、背景に色をつけるプロパティです。
こちらは前回使用しましたね。
.content {
background-color: #eee;
}値にはカラーコードを指定します。
background-image
background-imageは、背景画像を設定するプロパティです。
imagesフォルダに保存した、image.jpgを指定してみましょう。
分かりやすいように高さも指定します。
.content {
height: 500px;
background-image: url("../images/image.jpg");
}background-imageの値は、url(“画像までのパス”)の形で指定します。
ダブルクォーテーション（”）がない形でも大丈夫です。
background-image: url(../images/image.jpg);パスはcssファイルを基準に、画像ファイルの保存場所になります。
../で一つ上のディレクトリ（my-web-siteディレクトリ）に行きます。そこから、imagesフォルダのimage.jpgファイルを指定しています。
これで背景画像が表示されます。
background-size
background-sizeは、背景画像のサイズを指定するプロパティです。
.content {
height: 500px;
background-image: url("../images/image.jpg");
background-size: 100px auto;
}background-sizeの1番目の値は横幅、2番目の値は高さです。初期値はいずれもautoです。
autoを指定すると画像の縦横比が保たれるので、横幅を100px、高さをautoにして画像が引き伸ばされないようにしています。
パーセントでの指定も可能です。
background-size: 50% auto;他にも、以下のような指定もできます。
background-size: cover;coverを指定すると、全体を覆う形になり、画像の比率が要素と異なる場合は、上下または左右が切り取られます。
1枚の画像を要素に隙間なく表示させるときに使います。
background-size: contain;containを指定すると、縦横比を保って切り抜かれない最大のサイズまで大きくなります。
縦横比を保って画像全体を表示させたい時に使用します。
background-repeat
background-repeatは、背景画像の繰り返しを指定するプロパティです。
.content {
height: 500px;
background-image: url("../images/image.jpg");
background-size: 100px auto;
background-repeat: no-repeat;
}background-repeatにno-repeatを指定すると、画像が繰り返されなくなります。初期値はrepeat（横方向、縦方向両方で繰り返す）。
repeat-xで横方向（X軸方向）、repeat-yで縦方向（Y軸方向）に繰り返されます。
background-repeat: repeat-x;background-repeat: repeat-y;background-position
background-positionは、背景画像の位置を指定するプロパティです。
background-sizeをcoverに変更して、background-position: right bottom;を追加してください。
.content {
height: 500px;
background-image: url("../images/image.jpg");
background-size: 100px auto;
background-repeat: no-repeat;
background-position: right bottom;
}背景画像の位置が右下に移動しました。
次は、以下のように変更してください。
.content {
height: 500px;
background-image: url("../images/image.jpg");
background-size: 100px auto;
background-repeat: no-repeat;
background-position: center;
}背景画像の位置が中央になりました。
位置は数値でも指定ができます。
.content {
height: 500px;
background-image: url("../images/image.jpg");
background-size: 100px auto;
background-repeat: no-repeat;
background-position: 50px 100px;
}X軸方向に50px、Y軸方向に100pxの位置に移動しました。
.content {
height: 500px;
background-image: url("../images/image.jpg");
background-size: 100px auto;
background-repeat: no-repeat;
background-position: 50px 100px;
}px以外にも%などの単位も利用可能です。
他にも、以下のような指定もできます。
background-position: right 50px bottom 100px;この場合、右端から50px、下から100pxの位置に移動します。