JavaScript Random Background Image

This code snippet helps you to create a random background image using javascript.

 

How to Create JavaScript Random Background Image

First of all, load the following assets into the head tag of your HTML document.

<link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>

Create the HTML structure for the random background image as follows:

<div class="container">
	<div class="jumbotron">
		<h1>
			Random Images
		</h1>
  <p>
		Use the button to load 1 of 3 random images in the container below. This is for illustration purposes only. In a real world application, I would just call the function immediately on load time. But for this demonstration it is easier to click the button. 
	</p>
  <p>
		<a class="btn btn-default btn-lg" href="#" role="button" onclick="randomImage()">Change Image Below</a>
		</p>
</div>
<div class="row">
	<div class="col-sm-12">
		<h2>
			View Results...
		</h2>
		<p>
			This is where the action is going to be. The image below is going to load one of 3 images randomly. You could use this in a real-world application for something like a hero or jumbotron image. Or to load a random "current project" or "portfolio" item. Lastly, the images loading are just placehold images from <a href="http://placehold.it/" target="_blank">Placehold.it</a>
		</p>
		<div id="random-image-container">
			<h6>
				Notice the background image is going to change
			</h6>
		</div>
</div>

Now, style the random background image using the following CSS styles:

@import url(https://fonts.googleapis.com/css?family=Lora:400,700,400italic);
body {
  background-color: #ec5151;
  color: #f49f9f;
  font-family: Lora, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

a, a:hover, a:focus, a:visited {
  color: #770d0d;
}

h1, h2, h3, h4, h5, h6, .zg-sub-header {
  font-family: Lora, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.btn-default {
  background-color: rgba(0, 0, 0, 0.64);
  color: #fff;
  border: none;
}

.container .jumbotron {
  background-color: #ec5151;
  border: 2px solid #fff;
  border-radius: 0px;
  margin-bottom: 0;
}

#random-image-container {
  background-color: rgba(0, 0, 0, 0.64);
  padding: 15px;
  margin-bottom: 15px;
  border-radius: 7px;
  height: 250px;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.random-image-01 {
  background-image: url("http://placehold.it/500x250&text=Image+01");
}

.random-image-02 {
  background-image: url("http://placehold.it/500x250&text=Image+02");
}

.random-image-03 {
  background-image: url("http://placehold.it/500x250&text=Image+03");
}

Load the following scripts before closing the body tag:

<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js'></script>

Finally, add the following JavaScript function for its functionality:

function randomImage(){
	var el = document.getElementById("random-image-container");
	var randomNumber = Math.floor((Math.random() * 3) + 1);
	if (randomNumber == 1){
	el.className = "random-image-01";
	} else if (randomNumber == 2) {
		el.className = "random-image-02";
	} else {
		el.className = "random-image-03"
	}
}

That’s all! hopefully, you have successfully created JavaScript random background image. If you have any questions or suggestions, feel free to comment below.