DEV Community 👩‍💻👨‍💻

Cover image for How to Create Background-Changer Using HTML, CSS and JavaScript.
Ajay Sharma
Ajay Sharma

Posted on

How to Create Background-Changer Using HTML, CSS and JavaScript.

Hello Everyone, In this Post We Will be Seeing How to Create Background Changer Using HTML, CSS and JavaScript.

Here is The Live Link of Page

Follow Me on LinkedIn

Follow Me on Github

Steps to Create :-

  1. Choose Any Text Editor (VSCode Recommended).
  2. Create 3 Files in Current Project Directory, index.html, style.css and app.js.
  3. Use Below HTML, CSS and JS Code To Build Your Page.
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Background Changer</title>
    <link rel="stylesheet" href="style.css">
    <div id="container">
        <div class="title">
            Click To Change Background
    <script src="./app.js"></script>
Enter fullscreen mode Exit fullscreen mode
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
#container {
    cursor: pointer;
    border: none;
    width: 50%;
    margin: 0 auto;
    margin-top: 50vh;
    background-color: #1B98F5;
    box-shadow: 0 0 20px #fff;
.title {
    color: #fff;
    font-size: 30px;
    font-weight: lighter;
    text-align: center;
    padding: 20px;
Enter fullscreen mode Exit fullscreen mode
let containerElement = document.getElementById("container");

containerElement.addEventListener("click", changeColor);

function changeColor() {
    let random1 = Math.floor(Math.random() * 255 + 1);
    let random2 = Math.floor(Math.random() * 255 + 1);
    let random3 = Math.floor(Math.random() * 255 + 1); = `rgb(${random1}, ${random2}, ${random3})`;
Enter fullscreen mode Exit fullscreen mode

Top comments (2)

mxglt profile image
Maxime Guilbert

Hi, to expose your code, you can use codepen ;)
It will allow you to have a direct render of your code and let people have an access to the code snippet.

ajaysharma12799 profile image
Ajay Sharma Author

Hi Thanks For Showing Interest In My Code, Sure I Will Make a Codepen Account and WIll Update My Code There.
Thanks 👍😊

🌚 Browsing with dark mode makes you a better developer by a factor of exactly 40.

It's a scientific fact.