あなたのキモチ つなげるカタチ

TOP > jQuery > 【jQuery】ウィンドサイズいっぱいに背景画像を表示するテクニック/‎Full Page Background Image

【jQuery】ウィンドサイズいっぱいに背景画像を表示するテクニック/‎Full Page Background Image

スポンサーリンク

実装内容

今回は、ページへアクセスした時にウィンドウサイズいっぱいに画像を表示させる方法をご紹介します。こちらは、画像をウィンドウサイズ一杯に表示をさせながら、ウィンドウサイズを変更してもリキッドに可変する仕組みとなっています。

実装所要時間:10分程度

実装方法

実装に必要なスクリプトはたったのこれだけです。

$(function(){
  var $window = $(window);
  var kvfull = $(".img");
  function Resize(){
      var winH = $window.height();
      kvfull.height(winH);
    }
    $window.on("resize",Resize);
    Resize();
});

仕組みは非常にシンプルです。
1.横幅はwidth:100%;、高さは$(window).height();でウィンドウサイズの高さを取得
2.resizeによってウィンドウサイズを変更するたびに高さが変わる
3.画像は背景に設定するのがポイント
background-size: cover;を使用することでウィンドウサイズに対してよい感じで画像が表示されます。

スポンサーリンク

コメントを残す

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