HTML Responsive css doesn't work with random image

Question

The original template just used fixed image and made it responsive for different screen resolutions:

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

Now, I add a random image and tried to make the class/style of the responsive, work here, but it doesn't.

   <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>

What am I doing wrong? may be the class="bg-img" style="background-image" doesn't recognize the random image? if so, how can it be solved?

Update

I am trying something else, taking the original code using the div for the background, and making it programmable:

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

but still I can't make it work. Something is wrong and I get an error

--> Uncaught SyntaxError: missing ) after argument list

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> 

Normally I would use img instead of div for displaying an image. I had to set a width and height for the div since it had nothing in it. This can be something like 100px or to be responsive - I used 100% (to fill the current view).

I used background-size:cover so that the image fills the div no matter what size it is.

Answer 2

Use this :

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

Instead of

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