cssを使用して背景画像サイジング

Question

このコードを使用して背景用の画像をインポートしていますが、画像を画面サイズに合わせることができず、画面よりも大きく表示されます 助けてください。

$(switchBackground); 
 
    var oFReader = new FileReader(), 
 
     rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i; 
 

 
    oFReader.onload = function(oFREvent) { 
 
     localStorage.setItem('b', oFREvent.target.result); 
 
     switchBackground(); 
 
    }; 
 

 
    function switchBackground() { 
 
     $('body').css('background-image', "url(" + localStorage.getItem('b') + ')');  
 
    } 
 

 
    function loadImageFile(testEl) { 
 
     if (! testEl.files.length) { return; } 
 
     var oFile = testEl.files[0]; 
 
     if (!rFilter.test(oFile.type)) { alert("You must select a valid image file!"); return; } 
 
     oFReader.readAsDataURL(oFile); 
 
    }

<input id="test" type="file" onchange="loadImageFile(this)" />

demo

Answer 1

あなたが現在今そうであるように、あなたのCSSやJSを経由して、これを追加してみてください...

body { 
    webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

Updated demo

Answer 2

これは何ですか私のために働いた= ]

function switchBackground() { 
    $('body').css('background-image', "url(" + localStorage.getItem('b') + ')'), 
    $('body').css('background-size', '100%'), 
    $('body').css('background-repeat','no-repeat');  
}