好きなCSSプロパティは background-sizeのcoverとcontain

CSS Property Advent Calendar 2013 の16日目の記事です。

好きなCSSプロパティというか値ですが、background-sizeのcoverとcontainです。

coverを指定すると、背景画像が縦横比を保ちながら要素を覆うようにぴったりとリサイズされ、containを指定すると、同じく縦横比を保ちながら要素内に収まるようにぴったりとリサイズされます。

対応してないブラウザもIE8以下くらいです。

嬉しい！

下記のデモで background-sizeのcoverとcontain を体験できます。

明日は xl1 さんです。