background-imageは多くの人がつまづきます。 うんざりするほどプロパティがたくさんあるし、なんか直感的じゃないし嫌になりますよね。 使いこなすとなるとちょっと大変なんですが、要点絞って基本ができるようになりましょう。

主なプロパティは

• background-image→画像を挿入する
• background-repeat→画像を繰り返すか繰り返さないか
• background-size→画像サイズ変更
• background-position→画像の位置を調整

です。

背景画像を設定しようと思ったら、4つも使わないといけません。 大変ですね。

だからまず

• background-image
• background-size

だけしか使いません。 そしてさらにbackground-sizeの値をひとつに絞ったうえで、 そこそこ使えるようになってしまう知識をお伝えします。