• このエントリーをはてなブックマークに追加

2016年10月16日(Sun)

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

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

背景画像を大小さまざまなモニターやブラウザのサイズに合わせてピッタリと表示させたい場合の高さを指定する方法です。 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サイト】

コメント(0件)

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

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

【ソーシャルボタン】


TOP