背景色を変更する
背景色を変更するには「background-color」プロパティを用います。色の指定方法は文字色の指定方法と同じです。
CSS
- .class{
- background-color: #90EE90;
- color: #000000;
- height: 100px;
- width: 250px;}
PREVIEW
背景画像を指定する
背景画像を指定するには「background-image」プロパティを用い、画像は「url(ファイル名)」または「url(フォルダ名/ファイル名)」と指定します。フォルダ名・ファイル名は半角英数字である必要があり、ファイル名は「png」や「jpeg」などの拡張子も含めたものになります。
CSS
- .class{
- background-image:
- url(img/bgimg.png);
- color: #000000;
- height: 200px;
- width: 200px;}
PREVIEW
背景画像の大きさを指定する
背景画像の大きさを指定するには「background-size」プロパティを指定します。要素の横幅または高さに背景画像を合わせたい場合は「cover」を指定し、要素の大きさ内に背景画像を繰り返し配置して敷き詰めたい場合は「contain」を指定します。
どちらの場合も元の画像の縦横比は維持されます。そのため「cover」の指定で要素の横幅または高さが元の画像より小さい場合、要素からはみ出た画像部分はカットされます。
CSS
- .class1{
- background-image:
- url(img/bgimg.png);
- background-size: cover;
- color: #000000;
- height: 130px;
- width: 250px;}
- .class2{
- background-image:
- url(img/bgimg.png);
- background-size: contain;
- color: #000000;
- height: 130px;
- width: 250px;}
PREVIEW
