ROCHAS

background-size:coverで背景画像をフルスクリーンにフィットさせたレスポンシブウェブデザイン

background-size: coverを使って、たった3行のCSSで背景画像をフルスクリーンにフィットさせる方法をご紹介します。 フルスクリーン表示もレスポンシブウェブデザインもFluidレイアウトであり、background-sizeプロパティによって背景画像の表示サイズが指定できる、という原理を利用して、簡単なデモを3つ作ってみました。スマートフォンにも対応、IE8以下でも許容範囲で対応しています。