この背景イメージはどのように機能しますか？

Question

だから、このウェブサイト：

http://www.atomicdust.com/

彼らはすべてのページに背景画像を持っていますが、ズームするとき、それは変更されません - 今まで。どのくらい速くロードするかは言うまでもない。背景画像なしでコンテンツをズームする方法はありますか？私はそれが反復されたイメージだったかどうか理解できましたが、これはそうではありません。

Answer 1

このサイトでは、スクリプトで行われているように見えますが、@ Robageが観察していますが、最新のブラウザでは（CSS3）の "cover"プロパティを使用して成功しました。background-size: cover;マイノートコメントのために！）this A List Apart articleは私の情報を入手した場所です。

私の（非常にまだ進行中！）写真サイトでは、それは今のところlooks like thisです。私が試したブラウザを拡大すると、背景は同じサイズのままです。 Internet Explorerがそれに対処できないなら私には驚かないだろうが。

どのようにして速いそのサイトの画像が読み込まれると、そのトリックは圧縮画像の良好な選択です。 The background that loaded when I visited their siteは1024x680ピクセルですが、白黒の大部分が白黒であるため、非常に小さい74KBに圧縮されます。それは、jQueryとその使用

Answer 2

：< "/-test.jsをリサイズ/スクリプト" スクリプトタイプ= "テキスト/ javascriptの" SRC =>

$.fn.bgResize = function(options) { 

    var defaults = { 
     imageWidth: 800, 
     imageHeight: 600 
    }; 

    var options = $.extend(defaults, options); 

    var obj = $(this); 

    var initHtml = obj.html(); 

    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width(); 

    obj.height(windowHeight); 
    obj.width(windowWidth); 
    $('#work-wrapper').height(windowHeight); 
    $('#work-wrapper').width(windowWidth); 

    obj.html('<div id="inner-bg">'+initHtml+'</div>'); 

    $('#inner-bg img').each(function(){ 
     $(this).css({'display' : 'block', 'width' : '100%', 'height' : '100%'})        
    }); 

    function doResize(){ 

     var screenheight = $(window).height(); 
     var screenwidth = $(window).width(); 

     var imageheight = options.imageheight; 
     var imagewidth = options.imagewidth; 

     var ratio = imagewidth/imageheight; 

     var testwidth = screenheight * ratio; 
     var testheight = screenwidth/ratio; 

     obj.height(screenheight); 
     obj.width(screenwidth); 
     $('#work-wrapper').height(screenheight); 
     $('#work-wrapper').width(screenwidth); 

     if (testheight < screenheight){ 
      obj.children('#inner-bg').width(testwidth); 
      obj.children('#inner-bg').height(testwidth/ratio); 
      var finalheight = Math.round(testwidth/ratio); 
      var finalwidth = testwidth; 
      var topoffset = (finalheight - screenheight)/2; 
      var leftoffset = (finalwidth - screenwidth)/2; 
     } 

     else if (testheight > screenheight){ 
      obj.children('#inner-bg').height(testheight); 
      obj.children('#inner-bg').width(testheight * ratio); 
      var finalwidth = Math.round(testheight * ratio); 
      var finalheight = testheight; 
      var topoffset = (finalheight - screenheight)/2; 
      var leftoffset = (finalwidth - screenwidth)/2; 
     } 

     else {} 

     obj.children('#inner-bg').css("top", -topoffset); 
     obj.children('#inner-bg').css("left", -leftoffset); 

    } 

    doResize(); 

    $(window).resize(function(){ 
     doResize(); 
    }); 


    return this; 

};