JavaScript Change Background Image
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of JavaScript change background image, we will change the background image of any HTML page using the JavaScript function. The syntax of functions in JavaScript is,
function name(parameter1, parameter2,......) {
// block of code
}
And we will set the background image using the style attribute in JavaScript. The syntax is,
Element.style.CSSproperty = value ;
We will see on example using this below.
Step By Step Guide On JavaScript Change Background Image :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript change background image</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
body{
background-color: aliceblue;
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}
h1{
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
h3{
color : rgb(95, 194, 95) ;
font-size: 20px;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript change background image </h3>
</center>
<select name="BgImage" id="BgImage" onchange="changeBackgroundImage(this)">
<option value=""> Choose background image </option>
<option value="dragonfly.jpg">dragonfly</option>
<option value="rabbit.jpg">rabbit</option>
<option value="peacock.jpg">peacock</option>
<option value="sunset.jpg">sunset</option>
<option value="snowflake.jpg">snowflake</option>
</select>
<script>
function changeBackgroundImage(e) {
let target = document.body;
target.style.backgroundImage = "url("+e.value+")" ;
target.style.backgroundRepeat = "no-repeat" ;
target.style.backgroundSize = "cover";
}
</script>
</body>
</html>
- writing HTML code <!DOCTYPE html> is used to specify the HTML version that a file is written in.
- The <HTML> tag used to specify the root of an HTML document must then be written. Additionally, add the </html> tag at the end.
- The metadata for the HTML file is contained in the <head> tag, which is closed with </head> tag.
- The HTML document's <title> is then established using the title tag, which is followed by the < /title> tag.
- We'll use an external CSS file to style the HTML page.
- using <style> tag to add CSS
- create a <Center> tag the add a <h1> tag used to add a heading close it with </h1> tag and add a <h3> tag within it
- now create <select> tag with the onchange of a function with an argument.
- Creating some <option> tags and adding some background image to each tag's value.
- To write JavaScript, create a <script> tag
- Now calling the function and pass an argument e
- Let a variable target by accessing document.body.
- Using target.style.backgroundImage and equal it with url( e.value ).
- Also using background repeat and background size property.
- Lastly, by selecting desired image to the HTML page we can change the background image.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know How to change background image using JavaScript.
I hope this article on JavaScript change background image helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
