changing html element background image js

Question

i have searched google and on here but i cant exactly find a correct answer to my problem i used this code:

html {
   background: url('../resources/imgs/bgs/mainbg.jpg') no-repeat center center fixed; 
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
}

that i got from the internet to set a background image that is always in the center and fits perfecly in the browser and it works great but i ran into a problem. i need to change the background image on a button click but i dont know how to target the html tag is it even possible? many thanks :)

my question was flagged as a duplicate but my problrm is not just getting the style of the html elememnt but changing it the same as the code snippet using only pure javascript

Possible duplicate of How to get the <html> tag HTML with JavaScript / jQuery? — C3roe
– C3roe, Commented Jul 15, 2018 at 14:30
"javascript get html element" typed into Google could have led you to that duplicate directly. — C3roe
– C3roe, Commented Jul 15, 2018 at 14:31
Please include code that you have tried, it gives us more context as to what you are trying to achieve and makes it easier to pinpoint where you might be going wrong. — Jon P
– Jon P, Commented Jul 15, 2018 at 23:31

Mamun · Accepted Answer · 2018-07-15 14:46:34Z

1

You have to set both backgroundImage and backgroundSize property. Try the following:

document.querySelector('#btnSetImage').addEventListener('click', function(){
  var html = document.querySelector('html');
  html.style.backgroundImage = "url('https://www.noodleman.co.uk/images/source/google_merchant_bulk_category_assign/google.jpg')";
  html.style.backgroundSize = 'cover';
});

<button type="button" id="btnSetImage">Set Background Image</button>

edited Jul 15, 2018 at 14:46

answered Jul 15, 2018 at 14:21

Mamun

69k9 gold badges51 silver badges62 bronze badges

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

Comments

Davidos · Accepted Answer · 2018-07-15 13:39:53Z

0

Simply use:

document.getElementsByTagName('html')[0].style.backgroundImage = "url('img_tree.png')";

answered Jul 15, 2018 at 13:39

Davidos

6269 silver badges22 bronze badges

3 Comments

Davidos Over a year ago

Too fast answer, I fixed it :)

kriskotoo BG Over a year ago

that didnt work the new image is just placed in the corner and not the whole screen

Davidos Over a year ago

@kriskotooBG so maybe try: document.getElementsByTagName('html')[0].style.background = "url('img.png') no-repeat center center fixed";

Dee · Accepted Answer · 2018-07-15 14:05:22Z

0

With jquery you could do the following

$('html').on('click', function(){
    $('html').css({
      "background": "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed",
      "background-size": "cover"
    });
});

answered Jul 15, 2018 at 14:05

Dee

873 bronze badges

2 Comments

kriskotoo BG Over a year ago

sorry but i didnt ask for a jquery solution

Dee Over a year ago

then you can just add two different styles with javascript ----document.getElementsByTagName('html')[0].style.background = "url('picsum.photos/1200/3300/?blur') no-repeat center center fixed"; document.getElementsByTagName('html')[0].style.backgroundSize = 'cover';

Jon P · Accepted Answer · 2018-07-15 23:34:51Z

0

You can access the html element directly with documentElement:

/*Just change the image source with javascript*/
document.querySelector('#changeImage').addEventListener('click', function() {
  document.documentElement.style.backgroundImage = 'url("https://www.fillmurray.com/400/400")';
});

/*Base settings in CSS*/

html {
  background: url('https://www.fillmurray.com/g/400/400') no-repeat center center fixed;
  /*This Would be a greyscale image*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

<div style="color:#FFF;">Bill Murray!</div>
<!-- Just Some Content -->
<button id="changeImage">ChangeImage</button>

edited Jul 15, 2018 at 23:34

answered Jul 15, 2018 at 23:25

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

Collectives™ on Stack Overflow

changing html element background image js

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related