background関連のプロパティ
background-color、background-imageなどbackground～から始まるサブプロパティは、個別に背景に関連する値を設定するプロパティです。
background-color
背景の色を指定します。
| background-color値 | 説明 |
| ※色 | 背景色をキーワード(ex.red)、16進数、RGBA等により設定する |
background-colorプロパティ利用例
CSS
.sample1 {
background-color: red;
}
background-image
背景に画像を指定します。
| background-image値 | 説明 |
| url(ファイルパス) | 背景に画像イメージを設定する |
| linear-gradient(色,色) | 背景に線形グラデーションを設定する |
| radial-gradient(色,色) | 背景に円形グラデーションを設定する |
※グラデーションlinear-gradient、radial-gradientについてはこちらで詳しく説明しています。
background-imageプロパティ利用例
CSS
.sample2_1 {
background-image: url(./test.jpg);
}
複数の画像を指定することもできます。この場合記載された順に上から背景画像が適用されます。
.sample2_2 {
background-image: url(./test1.jpg),url(./test2.jpg),url(./test3.jpg);
}
background-repeat
背景に画像を指定した場合にその画像の繰り返しを指定します。
| background-repeat値 | 説明 |
| repeat(初期値) | 繰り返し |
| repeat-x | 水平方向のみ繰り返し |
| repeat-y | 垂直方向のみ繰り返し |
| no-repeat | 繰り返さない |
background-repeatプロパティ利用例
CSS
.sample3 {
background-repeat: no-repeat;
}
background-position
背景に画像を指定した場合にその画像の配置位置を指定します。
| background-position値 | 説明 |
| ※座標 | 左上を基準に横方向、縦方向の順に座標を指定する。 |
background-positionプロパティ利用例
CSS
.sample4_1 {
background-position: 100px 50px;
}
左上の座標を画面全体のパーセンテージで記述することもできます。
.sample4_2 {
background-position: 10% 20%;
}
center等のキーワード値も利用できます。横方向はleft、center、right、縦方向はtop、center、bottomです。
.sample4_2 {
background-position: left center;
}
background-size
背景に画像を指定した場合にその画像の拡大/縮小方法を指定します。
| background-size値 | 説明 |
| auto(初期値) | 背景に指定する画像サイズそのままで表示されます。 |
| contain | 縦横比を保ったまま拡大/縮小します。短い辺に合せます。（画像のはみだし無し、余白有り） |
| cover | 縦横比を保ったまま拡大/縮小します。長い辺に合せます。（画像のはみだし有り、余白無し） |
| (横) (縦) | 縦横をpx、%、autoを利用して指定することが出来ます。 |
background-sizeプロパティ利用例
CSS
.sample5 {
background-size: contain;
}
background-attachment
背景に画像を指定した場合にその画像のを固定するかスクロールするかを指定します。
| background-attachment値 | 説明 |
| scroll(初期値) | スクロールに従って背景画像が移動します。 |
| fixed | スクロールしても背景画像は移動しません。 |
background-attachmentプロパティ利用例
CSS
.sample5 {
background-attachment: fixed;
}
backgroundプロパティ
backgroundプロパティはここまでで記載した、上記background～サブプロパティをまとめて記載することのできるプロパティ(ショートハンドプロパティ)です。
backgroundプロパティ利用例
CSS
.sample7 {
background: red url(./test.jpg) no-repeat 100px 50px contain fixed;
}