How to change a background url of css in javascript?

Question

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;
}

Simone Rossaini · Accepted Answer · 2022-03-17 13:40:29Z

2

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;
}

answered Mar 17, 2022 at 13:40

Simone Rossaini

8,1461 gold badge16 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

JulesUK · Accepted Answer · 2022-03-17 16:24:04Z

0

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

answered Mar 17, 2022 at 16:24

JulesUK

5755 silver badges20 bronze badges

Comments

marc_s · Accepted Answer · 2022-04-04 17:08:09Z

0

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>

edited Apr 4, 2022 at 17:08

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 17, 2022 at 16:30

Maik Lowrey

17.8k8 gold badges54 silver badges101 bronze badges

Collectives™ on Stack Overflow

How to change a background url of css in javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related