最近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】で指定してもできるはずです。