クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
column_general_header02

【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 &gt; imgW){
        target.css('backgroundSize','cover');
        }
        });
        

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

author

narumasa(なるまさ)

http://narumasa.com


フリーランスのWebクリエイターとして2001年から活動。
レコーディング・エンジニアとして職歴をスタートし、Webの勉強をすべくスクールに通い、デザイン会社のWebデザイナーへ。2001年に退職後、フリーランスのWebクリエイターとして活動しつつ、商品企画会社に入社し、企画プロデューサー・取締役を経て、再びフリーランスに。
現在はフリーランスのWebクリエイターとして数々の大企業のホームページから街の商店のホームページまで、1人で企画からディレクション、デザイン、コーディング、プログラミングまで全てを担当している。

関連記事