random fullscreen background image on browser refresh

random fullscreen background image on browser refresh

Im using this script that I found online to have a random background image
on whenever the browser is refreshed.
CSS
body{
background: no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
JS
$(document).ready(function(){
var images=['images/001.jpg',
'images/002.jpg',
'images/003.jpg',
'images/004.jpg',
'images/005.jpg',];
var randomNumber = Math.floor(Math.random() * images.length);
var bgImg = 'url(' + images[randomNumber] + ')';
$('body').css({'background':bgImg, 'background-size':'cover', });
});
Works fine on screens larger than 1150px but anything less than that, the
images starts piling up one on top of another. How can I get this to
stretch out no matter what screen size. I dont care if the image gets
cropped on small screens as long as it fills the lot.
Thank you