NARUMASA CREATIVE DESIGN
Copyright © narumasa.com
All rights reserved.
09
3月
2019

【jQuery】背景画像 全画面表示:自作版

最近1ページ形式のランディングページなどでよく使われる『背景画像の全画面表示』。IE9以上の対応であれば、非常に簡単にできます。
CSS3で【background-size:cover】を指定すれば全画面表示になるので、jQueryで指定するか、CSSの【MediaQuery】で指定して下さい。

まずは普通に【CSS】の設定。

仮にdivタグを【id=”bg”】とします。

#bg{
background:url(../images/IMG_0339.jpg) no-repeat left top;
}

 

 

続いて【jQuery】の設定。

必須の【jQuery】を読み込んでおきます。
もちろんCDN(Contents Delivery Network)でも大丈夫です。

<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

 

 

ページを【load】した時と【resize】した時に機能して欲しいので、両方設定しておきます。

//↓【load】と【resize】を両方設定
$(window).on('load resize', function(){
//ここにターゲットID・CSS
var target = $('#bg');
var tgtW = target.width();
var tgtH = target.height();
var imgW = 1334;   //背景画像のサイズ
var imgH = 1000;

if(tgtW > imgW){
target.css('backgroundSize','cover');
}
});

 

 

たったこれだけです。
今回は、【jQuery】で指定しましたが、【MediaQuery】で指定してもできるはずです。

【CSS】float指定でのcenter合わせをするには。
SafariやGoogle Chromeででフォントをさらにきれいに表示する方法