Below is my css code, I wanna change the url background via javascript, maybe adding it to a variable because the url will be changing depeding on some cases in my program. How do I do this? Thanks :)
body {
width: 100vw;
height: 100vh;
background: url('exampleurl.com/example');
background-color: #02203b;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
You can use backgroundImage like:
const url = 'https://via.placeholder.com/500';
document.body.style.backgroundImage = `url(${url})`;body {
width: 100vw;
height: 100vh;
background: url('exampleurl.com/example'); /* you can use that as default */
background-color: #02203b;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}Good way to achieve this would be to use the JS classList function. https://developer.mozilla.org/de/docs/Web/API/Element/classList
function change() {
const b = document.querySelector('body');
b.classList.toggle('dark');
}body {
width: 100vw;
height: 100vh;
background: url('exampleurl.com/example');
background-color: #02203b;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
}
.dark {
background: black;
background: url('https://via.placeholder.com/500/green');
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}<button onclick="change()">change</button>To change it with jquery use :
const url = 'https://via.placeholder.com/500';
$('body').css('background-image', 'url($url)');
That is if you want to change it on conditions, etc