Random Image Generator using JavaScript
Last Updated :
14 Jun, 2025
In this article, we will learn how to generate random images in fixed intervals using only HTML, CSS, and JavaScript.
Approach: The pictures that are going to be generated randomly on the website should be stored in the form of an array; these pictures are then displayed to the user within a regular time interval. We use the setInterval() function which is an in-built function of JavaScript to set a timer between the images to display and we will use the floor(Math.random()*pics.length) method to generate a random number between 0 and the length of the array that is assigned to the images to display randomly.
Below is the step-by-step implementation of the above approach.
Step 1: In your HTML page, create an empty section that will contain the randomly generated pictures.
index.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: rgba(120, 16, 180, 0.767);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
margin: 1.5vh 20vw;
margin-top: 10vh;
text-align: center;
background: rgb(39, 188, 209);
background: linear-gradient(118deg,
rgba(39, 188, 209, 0.9783263647255778) 0%,
rgba(6, 14, 101, 1) 100%);
opacity: 0.9;
color: white;
padding: 10px 10vw;
border-radius: 20px;
min-height: 15vh;
}
h1 {
text-transform: uppercase;
}
section {
height: 50vh;
width: 100%;
margin-top: -50px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div class="container">
<br>
<h1>Geeks For Geeks Courses</h1><br>
<p>
With the idea of imparting programming
knowledge, Mr. Sandeep Jain, an IIT
Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming
excites you or you feel stifled,
wondering how to prepare for interview
questions or how to ace data structures
and algorithms, GeeksforGeeks is a
one-stop solution.
</p>
<br><br><br>
<section></section>
<br>
</div>
</body>
</html>
Output:
Step 2: In JavaScript, create an array of image links. The images inside the array are to be generated randomly on the webpage. We will call the indexes of this array randomly using Math.random function to be displayed.
Create a JavaScript variable to store a random value calculated by using the Math library i.e. Math.floor(Math.random()*pics.length). It is going to generate a random number between 0 and the length of the pics array, this would be assigned to the images inside the pics array to display them randomly.
setInterval() is an in-built function of JavaScript which is used to set a timer between the images to display. It has 2 parameters, the function that needs to be executed, and the time interval between each generation.
Now combine all the JS codes in your HTML code.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Image Generator</title>
<style>
* {
margin: 0%;
padding: 0%;
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
body {
background: rgba(120, 16, 180, 0.767);
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.container {
margin: 1.5vh 20vw;
margin-top: 10vh;
text-align: center;
background: rgb(39, 188, 209);
background: linear-gradient(118deg,
rgba(39, 188, 209, 0.9783263647255778) 0%,
rgba(6, 14, 101, 1) 100%);
opacity: 0.9;
color: white;
padding: 10px 10vw;
border-radius: 20px;
min-height: 15vh;
}
h1 {
text-transform: uppercase;
}
section {
height: 50vh;
width: 100%;
margin-top: -50px;
background-position: center;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div>
<br>
<h1>Geeks For Geeks Courses</h1><br>
<p>
With the idea of imparting programming knowledge,
Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream,
GeeksforGeeks. Whether programming excites you or you
feel stifled, wondering how to prepare for interview
questions or how to ace data structures and algorithms,
GeeksforGeeks is a one-stop solution.
</p>
<br><br><br>
<section></section>
<br>
</div>
<script>
const pics = [
'url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200316135008/red7.png")',
'url(
"https://media.geeksforgeeks.org/wp-content/uploads/20200316135014/yellow3.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/[email protected]")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-course-overview-image.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png")',
'url(
"https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png")'
];
const pic = document.querySelector('section');
function showImage() {
var a = Math.floor(Math.random() * pics.length);
var img = pics[a];
pic.style.backgroundImage = img;
}
setInterval(showImage, 1000);
</script>
</body>
</html>
Output:
Similar Reads
Random String Generator using JavaScript A Random String Generator is a small program that creates a string (a set of characters) made up of random letters, numbers, and/or symbols. These random strings are useful in many places like:Creating temporary passwordsGenerating unique IDsMaking test dataCreating captcha codesApproaches to Genera
3 min read
Random Quote Generator Using HTML, CSS and JavaScript A Random Quote Generator is capable of pulling quotes randomly from an API, a database, or simply from an array. We will be designing a Random Quote Generator from scratch using HTML, CSS, JavaScript, and type.fit API. The webpage displays a random quote from a collection and upon the click of a but
8 min read
Generate Random Number in Given Range Using JavaScript Here are the different ways to generate random numbers in a given range using JavaScript1. Using Math.random(): basic ApproachThis is the simplest way to generate a random number within a range using Math.random().JavaScriptlet min = 10; let max = 20; let random = Math.floor(Math.random() * (max - m
3 min read
How to Generate a Random Boolean using JavaScript? To generate a random boolean in JavaScript, use Math.random(), which returns a random number between 0 and 1.Approach: Using Math.random() functionCalculate Math.random() function.If it is less than 0.5, then true otherwise false.Example 1: This example implements the above approach. JavaScript// Fu
1 min read
How to Generate a Random Password using JavaScript? Creating a random password generator is an excellent beginner-friendly project that can be useful in real-world applications. Passwords are vital for securing accounts, and strong, randomized passwords enhance security significantly. How to Generate a Random Password using JavaScriptWhat We're Going
5 min read
Generate random alpha-numeric string in JavaScript In this article with the help of javascript we are generating the alpha-numeric string of specific length using javascript, here are some common method Approach 1: Creates a function that takes 2 arguments one is the length of the string that we want to generate and another is the characters that we
2 min read