How To Set Image In Background In Html
How to Change Background Image in Javascript
In this tutorial, you lot will larn how to alter groundwork image in javascript. Images play a very important role in making your website more bonny to users. You must have seen a lot of websites where they use either some sort of background color or background image to match the theme of their website.
The background epitome can be added using CSS. But to change it dynamically, we accept to make use of javascript. This is something which we are going to cover today. The background image is by and large applied to the body element.
To set up or alter background paradigm of any element, you can make use of the backgroundImage holding. We are going to use this property to achieve our goal.
In the following example, nosotros accept multiple images in the images directory. We also have four button elements. Upon click of each button, nosotros will option one paradigm from the images directory and prepare it as our background epitome. Delight take a look over the code example and the steps given below.
HTML & CSS
- We have 2 elements in the HTML file (
divandbutton). Thedivelement is just a wrapper for thebuttonelements. - The
background.jpgis our default background image for thetorsoelement. - Nosotros have washed some basic styling using CSS and added the link to our
style.cssstylesheet within thecaputelement. - Nosotros have also included our javascript file
script.jswith ascripttag at the bottom.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta proper noun="viewport" content="width=device-width, initial-scale=ane.0"> <meta http-equiv="X-UA-Uniform" content="ie=edge"> <link rel="stylesheet" href="style.css"> <championship>Document</title> </head> <body> <div> <push id="btn-1">one</button> <button id="btn-2">two</button> <button id="btn-3">three</button> <button id="btn-4">4</button> </div> <script src="script.js"></script> </body> </html>
torso { background-epitome: url('images/background.jpg'); background-repeat: no-repeat; background-size: embrace; } div { display: flex; justify-content: center; } push button { superlative: 50px; width: 50px; margin: 10px; } Javascript
- We have selected all the
buttonelements using thedocument.querySelector()method and stored them in thebtn1,btn2,btn3, andbtn4variables respectively. - We have attached the
clickissue listener to all thebuttonelements. - In the
clickevent handler function of eachbuttonelement, we are using thebackbgroundImageproperty of thebodychemical element to replace the groundwork prototype with i of the images present in the images directory. - In the case of the quaternary
clickresult handler part, we are not picking an image from the images directory using relative URL rather we are using an absolute URL. The browser will load the epitome from that accented URL and then gear up it as our groundwork image.
let btn1 = certificate.querySelector('#btn-1'); allow btn2 = document.querySelector('#btn-2'); let btn3 = certificate.querySelector('#btn-3'); let btn4 = document.querySelector('#btn-4'); btn1.addEventListener('click', () =>{ document.torso.style.backgroundImage = "url('images/one.jpg')"; }); btn2.addEventListener('click', () =>{ certificate.torso.manner.backgroundImage = "url('images/2.jpg')"; }); btn3.addEventListener('click', () =>{ document.body.mode.backgroundImage = "url('images/3.jpg')"; }); btn4.addEventListener('click', () =>{ document.torso.style.backgroundImage = "url('https://i.imgur.com/mPKfD2J.jpg')"; }); 
How To Set Image In Background In Html,
Source: https://www.fwait.com/how-to-change-background-image-in-javascript/
Posted by: blakeponver.blogspot.com
0 Response to "How To Set Image In Background In Html"
Post a Comment