background-sizeは要素の背景画像の大きさを設定します。
一つずつ見ていきます。
値としては、
contain：画像を切り取ったり縦横比を崩したりすることなく、画像ができるだけ大きくなるよう拡大縮小します。
cover：画像の縦横比を崩すことなく、画像ができるだけ大きくなるよう拡大縮小します。画像の縦横比が要素と異なる場合、空き領域が残らないように上下または左右のどちらかを切り取ります。
auto：縦横比が維持されるように、適切な方向に背景画像を拡大縮小します。
たったこれだけのことですが、背景画像を入れる時には、大きめの画像を用意して、containを指定するときれいに表示されます。
ここでは、取り上げていませんが、backgroundプロパティには、グラデーションをつけることができます。(background: radial-gradient)これらを使うとさらに、きれいに画像をいじれます笑
css3は、photoshop,illustratorもいらないかも！？(そこまでではないですが…)
コメント