background背景图片全屏问题

        我爱模板网做了这么多网站(两三百有了吧)，一直没注意到一个问题：背景图片的全屏问题！

        最近一个客户的手机网站中的一个页面的PSD效果如下，背景做成下面的样子：


        我一看，这背景得用背景的渐变做，于是写了下面的代码：

body{
    background:radial-gradient(ellipse 150% 100% at center bottom,#1770f8,#113071,#00040c);
}

        然而我发现背景根本不全屏，原因是body内容过少，在很多手机下面，只有半屏，背景渐变和背景图片一样，不能占全屏，只能占body的全部（就算设置 background-size:100% 100% 也没用）。不像背景颜色，可以占满全屏。

        于是乎，我想，这解决也简单，获取window和document的高度，谁高，就把谁的高度给body，于是乎，写了下面的jquery：

var wh = $(window).height();
var dh = $(document).height();
if(wh < dh){
    wh=dh;
}
$("body").height(wh);

        发给客户之后，客户回复说，部分背景不全屏。我一查看，果然如此，有些页面不全屏，估计是键盘占用屏幕或者什么问题，具体我也没研究，客户等着要。怎么办呢，没办法的办法，把背景截成图片，然后，将它当做图片，插入进去，再给它绝对定位，width和height都给100%，代码如下：

        css代码：

.background {
    position: absolute;
    overflow: hidden;
    z-index: -10;
    width: 100%;
    height: 100%;
    right: 0px;
    top: 0px;
    bottom: 0px;
    left: 0px;
}

        html代码：

<img src="images/body_bg.png" class="background">

完美解决，当然，上面的js代码也不需要了。我就是这种多一事不如少一事，解决了就万事大吉，也不研究咋回事了。