下面这段代码背景图片显示效果是平铺，效果就是一个页面很多张一样的背景图，怎么弄成一个页面就一张

Question

当前背景图显示效果是平铺的，怎么改才能让背景图铺满整个页面 ，本人对代码一窍不通，高手帮忙看下。
var canvas = document.createElement( 'canvas' );
canvas.width = 32;
canvas.height = window.innerHeight;

var context = canvas.getContext( '2d' );

var gradient = context.createLinearGradient( 0, 0, 0, canvas.height );
gradient.addColorStop(0, "#1e4877");
gradient.addColorStop(0.5, "#4584b4");

context.fillStyle = gradient;
context.fillRect(0, 0, canvas.width, canvas.height);

document.body.style.background = 'url(./f.jpg)' ;
就是怎么把下面第一张图的效果改成第二张图那样的效果

Answer 1

如果背景图片和网页宽度一致
background-repeat:no-repeat;

如果背景图片比你的warp层小的话，最好是缩放下背景，不然的话会露白。

Answer 2

body{
background: url("image.png");
background-repeat:no-repeat;
background-size:cover;或者background-size:100%;
}
但图片可能会失真，可以用PS进行修改