by背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります。見る人を思わず引き込む背景フルスクリーンですが、レスポンシブ対応にもなっていれば、とってもいいですよね。今回はそんな背景画像をフルスクリーン表示して、なおかつレスポンシブ対応にする方法をご紹介します。コードもとってもシンプルなので、試してみてください。CSSを記述するhtmlを準備するまずはHTMLを準備します。/></head><body><h1>背景画像はフルスクリーンにして、レスポンシブにも対応しています</h1></body></html>画像を準備する背景に表示するきれいな画像を準備します。サイズは今回のサンプルで左右1600px、天地1000px、解像度72ppiです。これぐらいの大きさであれば、かなり大きなモニターで表示しても、問題ないでしょう。1080pxですが、まったく問題なくキレイに表示されています。CSSを記述するつづいてCSSを記述します。background-sizeプロパティで、背景画像の表示サイズを指定します。#fff;}サンプルを用意しています。byお役に立てましたら、以下どれでも結構のですので、ポチリと......。当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。この記事を読んだ人はこんな記事も読んでいます無料で利用できるhtml5プレイヤー(jQueryプレイヤー)14(2013)html5のお陰で、プラグインなしでビデオ、音楽を導入できるようになりました。見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。Textures」こりゃ便利!というサービスがあったのでご紹介します。Printliminator」WEBサイトの必要な部分だけを印刷したい場合に大変便利なブックマークレットをご紹介。このブックマ記事を読むCSS3の色名147色(RGB、HEX16進カラーコード併記)CSS3になって、色名についても大幅に選択肢が増えたのをご存知でしょうか。私は知りませんでした。Watchがいよいよ発売になります。記事を読むHTML5ビデオにも対応できる無料動画変換ツール/コンバーター10HTML5ビデオを利用したサイトも見かけるようになってきました。