The background image is actually associated with the body tag rather than the html tag.
Try this:
body
{
background-image: url(xxxxx.jpg);
}
And use this script:
document.getElementsByTagName("BODY")[0].style.backgroundImage = "url('zzzzz.jpg')";
If it displays zzzzz.jpg as expected, then you can proceed to correct the rest of the CSS code.
UPDATE: I tested the code and fixed a bug. You should set
backgroundImage = "url('zzzzz.jpg')"
, not just the file name as previously mentioned.
For example, here's a working example using 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>
UPDATE 2:
No need to change the rest of the CSS, 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 composed of:
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
Using
background-image: url('xxxxx.jpg')
You only update the URL part of the compound above, while leaving the rest unchanged.
If an image is too small, it may be stretched to fit the entire screen, so ensure all images in a slideshow are the same size for consistency.