WEB帳
背景画像を画面サイズの高さに合わせる方法

背景画像を大小さまざまなモニターやブラウザのサイズに合わせてピッタリと表示させたい場合の高さを指定する方法です。 jQueryを使った方法とcssで指定する方法がありました。

jQueryを使った方法

今回、自分は最終的にjQueryの方法を採用しました！
デモ(jQuery)

javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
//ページ読み込み時
$(document).ready(function () {
  hsize = $(window).height();
  $("指定したいクラス名").css("height", hsize + "px");
});
//リサイズ
$(window).resize(function () {
  hsize = $(window).height();
  $("指定したいクラス名").css("height", hsize + "px");
});

CSSを使った方法

cssの場合は、html、bodyと高さを100％にしたい箇所にheight:100%;を指定するだけです。
デモ(CSS)

css

html, body, 指定したいクラス名{ height:100%; }

【参考Webサイト】

• 画面サイズに合わせて高さを指定する3つの方法

コメント（0件）

背景画像を画面サイズの高さに合わせる方法に対するご意見、ご感想、情報提供など皆様からのコメントをお待ちしております。 お気軽にコメントしてください。

【ソーシャルボタン】

• 
• Tweet