Question: I have a background image for my html page. I set it through css style:-

```
html{ 
    margin-top:10px;
    background: url(xxxxx.jpg) no-repeat center center fixed; 
    background-size: cover;
}

```

I want to know how I can change it dynamically it from the Javascript side.

I have tried something like: 

```
document.getElementById("html").style.backgroundImage = "url('yyy.jpg')";

```

but that doesn't change the image.

Without using jQuery, how can I access the html element and change its bkImage, say every 5 seconds to make it like a slideshow. (I will be storing my image urls in an array).

Answer: 
The background image is not really tied to the `html` tag but the `body` tag.
Try:

```
body
{ 
  background-image: url(xxxxx.jpg); 
}

```

And the script:

```
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";

```

If this works as expected (you see `zzzzz.jpg`, not `xxxxx.jpg`) then you're ready to fix the rest of the CSS code.

**EDIT:** tested the code and fixed a bug. You must assign `backgroundImage = "url('zzzzz.jpg')"`, not simply the filename as I've written before.

As an example, this works perfectly, all you need are two images (`red.jpg` and `blue.jpg`):

```
<html>
  <head>
    <style>
      body
      { 
        background-image: url('red.jpg');
      }
    </style>
  </head>
  <body>
    <script>
      document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('blue.jpg')";
    </script>
  </body>
</html>

```

**EDIT 2:**

The rest of the CSS must not change, so you'll still have:

```
body
{
  margin-top: 10px;
  background: url('xxxxx.jpg') no-repeat center center fixed;
  background-size: cover;
}

```

The `background` property is a compound:

```
  background: url('xxxxx.jpg') no-repeat center center fixed;
              ^                ^         ^      ^
              URL              R         H      V

  URL: the image url
  R: repetition
  H: horizontal alignment
  V: vertical alignment

```

With

```
background-image: url('xxxxx.jpg')

```

you just change the URL part of the above compound, leaving the rest as it was.
If an image is too small it might be stretched to cover the whole screen.
So for a good slide show be sure that all images have the same size.
To access the `html` element you can use `document.documentElement`:

```
document.documentElement.style.backgroundImage = "url('yyy.jpg')";

```

To change it every X seconds you can use `setInterval()` and have your images in an array.