Random background image for a webpage

I am trying to find a way that I can have an image that takes up the whole browser window and is responsive. Every time the page is loaded I would like the background image to change from a select group of photos that I have locally.

I have tried a few solutions on here but nothing is really working. The HTML I have is:

<div id="container">

  <img src="Images/IMG_3764.JPG" alt="An island in the middle of the sea in Turkey" id="backgroundImage">

</div>

The CSS I have is:

body {
margin: 0;
}

#container {
width: 100%;
height: 100%;
margin: 0;
}

#backgroundImage {
width: 100%;
position: fixed;
top: 0;
left: 0;
}

html, body { 
overflow: none !important; 
overflow-x: none !important; 
overflow-y: none !important; 
}

One of the JS solutions that I have tried is this:

var image = new Array ();
image[0] = "http://placehold.it/20";
image[1] = "http://placehold.it/30";
image[2] = "http://placehold.it/40";
image[3] = "http://placehold.it/50";
var size = image.length
var x = Math.floor(size*Math.random())

$('#backgroundImage').attr('src',image[x]);