Javascript 如何在jquery动画中包含背景图像

使用此代码，背景中没有图像。这里的动画功能有什么问题？Codepen。是否有方法通过按钮单击功能将不同的图像置于背景中

var colors=["http://publicdomainarchive.com/wp-content/uploads/2016/01/public-domain-images-free-stock-photos-002-1000x667.jpg","https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcSCJmPmIMiKQPy0M68oDKYuzoQT6pT4kL37vH8DzS3z36fYgza0"];
$(document).ready(function(){
   $("button").on("click",function(){
      getQuote();
});
});

function getQuote(){
      var color=Math.floor(Math.random()*colors.length);
  $("html body").animate({
      backgroundImage:colors[color],
      color:colors[color]
    },1000);    
  }

---

首先，不能使用jQuery的

.animate（）

方法设置

backgroundImage

属性的动画，其次

backgroundImage

属性应为：

backgroundImage:'url（/path/to/image.jpg）

如果每次单击都需要新的背景图像，请创建另一个URL数组以供使用：

var colors = ["#16a085", "#27ae60", "#2c3e50"];
var images = ["image-1", "image-2", "image-3"];

var color = Math.floor(Math.random()*colors.length);
var image = Math.floor(Math.random()*images.length);


$("body").css({
    backgroundImage: "url("+images[image]+")",
    color: colors[color]
});

如果不使用jQuery UI，jQuery不支持设置颜色动画。您可以使用简单的CSS设置颜色动画：

.message, .author {
  transition: color 1000ms ease 0ms;
}

---

我该怎么做才能让我的图像覆盖整个浏览器窗口？我试过backgroundSize:“100%100%”。但它不起作用@karlYou需要为身体定义宽度和高度：