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アソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18
プログラミングやコーディングするとき、どんなフォントを使っていますか? 私の場合、Coda 2とい
-
-
CSSの手入力が不要になる!複数の機能が1つになったCSSジェネレーター「ENJOY CSS」
CSS3になってから便利なジェネレーターが次々に登場していますが、今回ご紹介するジェネレーターはひと
-
-
無料のドメインを取得してレンタルサーバーに設定する方法
ドメインって無料で取得できるサービスがあるのをご存知でしたか? ドメインというとお名前.comなど
-
-
CSSを丸裸にして見やすく統計的に整理してくれる「CSS STATS」
サイトのCSSを解析してくれるサービスってたくさんありますが、項目ごとに見やすくまとめてくれて、活用
-
-
もはやアート?ブラウザの閲覧履歴をファビコンで一覧表示する「Iconic History」
ブラウザの閲覧履歴をファビコンで一覧表示するChromeの機能拡張「Iconic History」を
-
-
iPhoneもMacも簡単OK!CSSだけであなただけのAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device Generator」
CSSだけでAppleデバイスを描ける無料ジェネレーター「Pure CSS Apple Device
-
-
月額ゼロ円(無料)でホームページ・ECサイトを制作・運営できるサービス12
ホームページ制作を生業としているものにとっては、穏やかではないのが「無料でホームページを制作できてし
-
-
よくわかる 初心者のためのCSSアニメーションチュートリアル
初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア
-
-
信じられないほど美しい!CSSだけで絶滅危惧種30を表現した「In Pieces」
CSSだけで表現されているのに、信じられないほど美しいサイト「In Pieces」をご紹介します。
-
-
今さら聞けない!作業時間を短縮するChrome用ショートカットベスト・コレクション
ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい
