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 tag HTML with JavaScript / jQuery?](https://stackoverflow.com/questions/4196971/how-to-get-the-html-tag-html-with-javascript-jquery) — CBroe, Jul 15 '18 at 14:30
"javascript get html element" typed into Google could have led you to that duplicate directly. — CBroe, Jul 15 '18 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, Jul 15 '18 at 23:31

Mamun · Accepted Answer · 2018-07-15T14:46:34.090

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>

score 0 · Answer 2 · answered Jul 15 '18 at 13:39

0

Simply use:

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

answered Jul 15 '18 at 13:39

Davidos

419
5
17

Too fast answer, I fixed it :) – Davidos Jul 15 '18 at 13:41
that didnt work the new image is just placed in the corner and not the whole screen – kriskotoo BG Jul 15 '18 at 13:45
@kriskotooBG so maybe try: `document.getElementsByTagName('html')[0].style.background = "url('img.png') no-repeat center center fixed";` – Davidos Jul 15 '18 at 13:50

score 0 · Answer 3 · answered Jul 15 '18 at 14:05

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 '18 at 14:05

Dee

87
3

1

sorry but i didnt ask for a jquery solution – kriskotoo BG Jul 15 '18 at 14:12
then you can just add two different styles with javascript ----document.getElementsByTagName('html')[0].style.background = "url('https://picsum.photos/1200/3300/?blur') no-repeat center center fixed"; document.getElementsByTagName('html')[0].style.backgroundSize = 'cover'; – Dee Jul 15 '18 at 14:14

Jon P · Answer 4 · 2018-07-15T23:34:51.873

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>

changing html element background image js

4 Answers4