HTML响应式CSS不适用于随机图像

Question

原始模板仅使用固定图像，并使其响应不同的屏幕分辨率：

   <div class="bg-img" style="background-image: url('./img/background1.jpg');">
   <div class="overlay"></div>
   </div>

现在，我添加了一个随机图像，并尝试使响应式的类/样式在这里起作用，但事实并非如此。

   <header id="home">

   <div class="bg-img" style="background-image">
   <div id="banner-load"></div>

<script type='text/javascript'
   src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'> 
   </script>

   <script>
   var images = ['background11.jpg', 'background12.jpg', 'background13.jpg', 
   'background14.jpg', 
   'background15.jpg'];

    $('<img class="fade-in, bg-img" style="background-image" src="img/' + 
    images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner- 
    load');
    </script>

    <div class="overlay"></div>
    </div>

我究竟做错了什么？ 可能是class =“ bg-img” style =“ background-image”无法识别随机图像？ 如果是这样，如何解决？

更新

我正在尝试其他方法，将原始代码使用div作为背景，并使其可编程：

$("<div class='bg-img' style="background-image: url('img/" + images[Math.floor(Math.random() * images.length)] + ");'>")

但我仍然无法正常工作。 出问题了，我得到一个错误

->参数列表后未捕获到的SyntaxError：缺少）

Answer 1

 <header id="home"> <div class="bg-img" style="height:100%;width:100%;background-image:none;background-size:cover;"> <div id="banner-load"></div> <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'> </script> <script> var images = ['background11.jpg', 'background12.jpg', 'background13.jpg', 'background14.jpg', 'background15.jpg']; function getRandomImage() { return 'img/'+images[Math.floor(Math.random() * images.length)]; } function setRandomImage() { $('.bg-img').css('backgroundImage', 'url('+getRandomImage()+')'); } $(function(){ setRandomImage(); }); </script> <div class="overlay"></div> </div> 

通常我会使用img而不是div来显示图像。 我必须为div设置宽度和高度，因为其中没有任何内容。 这可以是100px之类的，也可以是响应性的-我用了100％（用于填充当前视图）。

我使用background-size：cover来使图像填充div，无论它是什么尺寸。

Answer 2

用这个 ：

$('.bg-image').css('backgroundImage', 'img/' + images[Math.floor(Math.random() * images.length)]);

代替

$('<img class="fade-in, bg-img" style="background-image" src="img/' + 
images[Math.floor(Math.random() * images.length)] + '">').appendTo('#banner- 
load');