This post will show you how to change background of webpage using JavaScript. Here , you will learn to changing background with 3 different ways.
 |
| Background changer using HTML, CSS, and JavaScript |
1. Background changer using color picker
Steps to create background changer with color picker
Take one input element and specify “type=color”. Specify onClick event to call function. Take one button to change background color on click.
To center input element and button set display property to flex and align-items and justify-content property to center. Set height property to 100vh to make responsive on all devices.
Define function. Inside the function, Dom method used for fetching color value from color picker and change background color on button click.
Source code of background color changer:
<!DOCTYPE html> <html> <head> <title>background color changer</title> <style> div { display:flex; align-items:center; justify-content:center; height:100vh; flex-direction:column; } input { flex-grow:0.1; margin:5%; padding:10px; } button { flex-grow:0.05; background-color:#00ff77; border-radius:20px; border:3px solid #ffcc77; font-weight:bold; font-size:12pt; } button:focus { color:#ff0000; } </style> </head> <body> <div> <input type="color" id="bgcolor"> <button type="button" id="btn" onClick="changebg()">Change Background Color</button> </div> <script> function changebg() { let colr=document.getElementById("bgcolor").value; document.body.style.backgroundColor=colr; } </script> </body> </html>
Output
2. Background image changer
Steps to create background image changer.
Create structure using HTML elements. Specify image height and width “50”, that display small size of image in div container.
Set body background using background-image property. Set background image position “top center”, which is suited for all images and image’s most of area covered. If you don’t want to repeat image set no-repeat to background-repeat property. Set background-size to 1600px and 1000px which is suited on all devices.
Set div and image property to inline block to save space. Add animation on p element. For clicking effect use :focus pseudo-class and :active pseudo-class for displaying which image is set as background.
Define five functions for different images and specify Dom method with “backgroundImage” property to set five different URLs.
Source code of background image changer
<!DOCTYPE html> <html> <head> <title>background color changer</title> <link rel="stylesheet" href="bgimgchanger.css"> <script src="bgimgchanger.js"></script> </head> <body> <div> <input type="color" id="bgcolor"> <button type="button" id="btn" onClick="changebg()">Change Background Color</button> </div> </body> </html>
CSS
body { background-image:url("/blog/anemone-g593c573b7_1920.jpg"); background-position:top center; background-repeat:no-repeat; background-size:1600px 1000px; } div { height:auto; width:auto; display:inline-block; background-color:#2e2c53; border-radius:10px; box-shadow:3px 3px 10px #000000; opacity:0.7; margin:2%; box-sizing:border-box; } p { padding:5pt; color:#ff0033; font-family:Arial, Helvetica, sans-serif; font-size:16pt; font-weight:bold; animation:colorchange 3s linear infinite; } @keyframes colorchange { 0%{color:#333399;} 30%{color:#33cc66;} 60%{color:#ff0033;} 100%{color:#cccc00;} } img { display:inline-block; margin-left:18px; border-radius:50%; } #img1:hover { border:3px groove #ff9999; } #img2:hover { border:3px groove #c6ebbf; } #img3:hover { border:3px groove #fab302; } #img4:hover { border:3px groove #009933; } #img5:hover { border:3px groove #010101; } img:active { box-shadow:3px 3px 15px #f2f2f2; }
JavaScript
function bgimg1() { document.body.style.backgroundImage="url('/blog/dahlia-g84ff66504_1920.jpg')"; } function bgimg2() { document.body.style.backgroundImage="url('/blog/pexels-hilary-halliwell-5184968.jpg')"; } function bgimg3() { document.body.style.backgroundImage="url('/blog/tulips-gff3713b67_1920.jpg')"; } function bgimg4() { document.body.style.backgroundImage="url('/blog/hd-wallpaper-g6914cd217_1920.jpg')"; } function bgimg5() { document.body.style.backgroundImage="url('/blog/pink-g191a07d79_1920.jpg')"; }
Output
3. Background color changer randomly
Steps to create Random background color changer
Specify one button using HTML element button and onClick event to call JavaScript function.
Set body background color orange. Set button position on center by setting position to absolute, top and left properties to 50% and use transform property with translate() (this will set button perfectly center).
Set button height and weight properties to auto to make button responsive on both small and large devices then apply other CSS styles to button.
Declare one function. Then specify an array with different colors names. To find total array elements use length property. Use random function with floor function to get rounded number. This will returns random array index value of color. Then set color to background using Dom method with backgroundColor property.
Source code of background color changer randomly
<!DOCTYPE html> <html> <head> <title>Random background color changer</title> <style> body { background-color:orange; } button { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); height:auto; width:auto; padding:5px; font-family:cursive; font-size:16pt; background-color:#009999; color:#cccccc; border-color:#cccccc; border-radius:20px; box-shadow:5px 5px 10px #009999; } </style> </head> <body> <button onClick="bgclr()">Change Background color</button> <script> function bgclr() { let colorvalue=["red","green","blue","violet","black","pink","yellow"]; let len=colorvalue.length; let randomcolor=Math.floor(Math.random()*len); document.body.style.backgroundColor=colorvalue[randomcolor]; } </script> </body> </html>
Output
0 Comments