2013/10/18
背景画像をフルスクリーン&レスポンシブ対応にする方法
背景画像をスクリーンいっぱいに表示しているサイトが増えているとはいえ、いま見てもインパクトがあります。
見る人を思わず引き込む背景フルスクリーンですが、レスポンシブ対応にもなっていれば、とってもいいですよね。
今回はそんな背景画像をフルスクリーン表示して、なおかつレスポンシブ対応にする方法をご紹介します。
コードもとってもシンプルなので、試してみてください。
htmlを準備する
まずはHTMLを準備します。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <meta https-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>背景画像はフルスクリーンにして、レスポンシブにも対応しています</title><br> <link rel="stylesheet" href="sample.css" /> </head> <body> <h1>背景画像はフルスクリーンにして、レスポンシブにも対応しています</h1> </body> </html> |
画像を準備する
背景に表示するきれいな画像を準備します。
サイズは今回のサンプルで左右1600px、天地1000px、解像度72ppiです。
これぐらいの大きさであれば、かなり大きなモニターで表示しても、問題ないでしょう。
うちのモニターは1920px 1080pxですが、まったく問題なくキレイに表示されています。
CSSを記述する
つづいてCSSを記述します。
background-sizeプロパティで、背景画像の表示サイズを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 |
html { min-height: 100%; background-size: cover; /*ボックス全体をカバーする大きさで表示*/ background-image: url(autumn-leaves_beiz.jp_L07128.jpg); background-repeat: no-repeat; background-position: center bottom;/*写真の見せたい場所を調整*/ } body{ min-height:100%; color: #fff; } |
サンプルを用意しています。
参考にどうぞ。
sample
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
レスポンシブ対応などコンテンツスライダー/スライドショー用jQueryプラグイン50+
サイトのコンテンツをリッチに見せるだけでなく、省スペースで数多くのコンテンツを効率的・効果的に表示で
-
-
レスポンシブWEBデザインの確認に最適!スマホ・タブレットでの表示を一度に確認できる「Responsinator」
レスポンシブWEBデザインの確認に最適なツールをご紹介します。 このツールを使えば、スマホやタブレ
-
-
クリックしたくなる!CSSだけで作られた無料のボンタコレクション「CSS Buttons」
CSSだけで作られた無料のボタンがコレクションされている便利なサイトをご紹介します。 Photos
-
-
CSSアニメーションを簡単・思いのままに作成できてしまう「Bounce.js」
最近のサイトではCSSアニメーションを使って、ユーザーに効果的な見せ方をしているサイトも増えてきまし
-
-
もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」
ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を
-
-
全部無料!レスポンシブWEBデザイン制作を驀進させるレスポンシブ対応テンプレート121
2013年も気がつけば、もうあとすこしとなりました。 そんななか、無料で利用できるフリーのレスポン
-
-
これが無料!ハイクオリティーなPhotoshop用WEBデザインテプンレート(psd)60+
海外のデザイナーがPhotoshopで作成したWEBデザイン用のテンプレート(psdファイル)をまと
-
-
画像URLを読み込むだけでCSSのfilterプロパティを試せる「CSS Filters Playground」
CSSで今後、ますます注目度が高まるであろうCSSフィルタ。 なにせお手軽にエフェクトをかけられる
-
-
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつける方法
JSを使わずにCSSだけで簡単にシンプルなパララックス効果をつけられる方法をご紹介します。 パララ
-
-
iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」
CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device
