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');