1.背景の色を設定する（background-color）
bodyタグに対して背景色を設定してみましょう。背景色を指定するCSSプロパティは「background-color」です。値にはcolorと同様にキーワード・カラーコード・RGB・RGBAが使えます。
「background-color」を「#FF0000（赤）」にしてみましょう。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>背景色を変更する</p>
</body>
</html>
サンプルCSS：
body{
background-color : #ff0000;
}
プレビュー：
2.背景に画像を設定する（background-image・background-size）
背景に画像を設定して、画像のサイズを調整します。
背景に画像を設定する（background-image）
まずは背景に設定する画像を用意しましょう。PNGもしくはJPEG・GIF形式なら何でも構いません。
こちらのサイトからも探せます。
https://unsplash.com/
画像が見つからったら、cssフォルダの中に保存します。
次にCSSプロパティ「background-image」で保存した画像を指定します。このとき画像はファイル名のあとに必ず拡張子（.jpg・.gif・pngなど）を付けてください。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<p>背景画像を設定する</p>
</body>
</html>
サンプルCSS：
body{
background-image : url(ファイル名.拡張子) ;
}
背景画像のサイズを指定する
次に背景画像のサイズを指定します。プロパティ名は「background-size」です。pxや%でも指定できますが、横幅が変わったときに合わせて自動的に変化する値も用意されています。
- auto（デフォルト）
- cover
- contain
- px
- %
pxと%は横幅と高さをスペースで区切って指定します。
サンプルCSS：
body{
background-image : url(ファイル名.拡張子) ;
background-size : 200px 100px ;
}
coverとcontainについて説明しておきます。
cover
縦横比は保持
背景領域を完全に覆う最小サイズになるように拡大縮小される
contain
縦横比を保持
背景領域に収まる最大サイズになるように拡大縮小される
3.背景画像の繰り返しと表示位置を制御する（background-repeat・background-position）
背景画像の繰り返しを制御する（background-repeat）
表示領域より背景画像が小さいと、背景は自動的に繰り返し表示になります。
この繰り返しについては「background-repeat」というプロパティで制御することが出来ます。値は以下のようなものがあります。
- repeat（デフォルト）
- repeat-x
- repeat-y
- no-repeat
横並びだけリピートさせるrepeat-x、縦並びだけリピートさせるrepeat-y、繰り返しをなくして1個だけ表示するのをno-repeatで設定します。
サンプルCSS：
.repeat{
background-repeat : repeat-y ;
}
プレビュー：
背景画像の表示位置を制御する（background-position）
通常、背景画像は要素の一番左上から詰めて並べられますが、「background-position」によって位置を制御することができます。指定できる値は以下のものです。
- キーワード（top・right・bottom・left）
- %
- px
%とpxで指定した場合、左上から○%もしくは○px移動する形になります。
サンプルCSS：
.position{
background-repeat: no-repeat;
background-position: center center;
}
プレビュー：
4.ショートハンドを使って省略して記述する
ここまで背景色・背景画像・背景画像のサイズ・繰り返し・ポジションなどのプロパティを解説してきましたが、これらのプロパティには全て「background-」という接頭文字がついていました。実はこれらのプロパティは、1つのプロパティでまとめて記述することができます。
このような複数のプロパティを1つにまとめられる機能のことをショートハンドといいます。
記述方法は以下のようになります。
background : 色 url(ファイル名) 繰り返し 位置 / サイズ ;
この順番でスペースをあけて区切ります。位置とサイズの間にだけ「/」が必要です。
サンプルCSS：
.shorthand {
background:skyblue url(ファイル名) no-repeat center center / 200px 100px;
}
