random background image on blogger

I'm trying to pull together some kind of code that will randomize the background image on my blogger blog.

My programming skills are scant, but I'm willing to try suggestions out.

I remember achieving s/th similar in Wordpress, by having a file of php-code stored inside a folder of images and then calling that php file - as if it was an image - from within CSS.

But from what I read, blogger doesn't recognize php, so I guess I'll have to try out some javascript (?)

<script type="text/javascript">
var image= new Array()
image[0]="Image01URL"
image[1]="Image02URL"
image[2]="Image03URL"
image[3]="Image04URL"
image[4]="Image05URL"
var random=Math.floor(5*Math.random());
document.write("<style>");
document.write("body {");
document.write(' background:url("' + image[random] + '") no-repeat fixed center center;');
document.write(" }");
document.write("</style>");
</script>`

I've tried the above but seen no results.

Besides, the article is from 2007, and I fear the method described may be outdated.

What's more, I don't really know where to put it.

Is it at the beginning of the <body> tag or should it be stored somewhere as an external file? And if so, how should I reference it from inside blogger? It would be slick to reference it from within CSS, but I have no idea if this is possible.

Any help would be greatly appreciated.

That is how I would do it but as usually, I'm open for edit, comments, ameliorations and suggestions if there's a way to make this code - and me - a better one.

So you wasn't that far cause actually my code look a bit like yours but with the abstraction of manually add the multiplier to the random number generator. With this all you have to do is to set your backgrounds URLs under the imageURLs variable.

Here's the documentation for the .style object.

    <script type="text/javascript">
function backgrounds() {
    var imageURLs = ["https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-301322.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-103541.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-279000.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-106689.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-365847.jpg", "https://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-284161.jpg"];
    return imageURLs;
}

function randomNumber(max) {
    return Math.floor((Math.random() * max));
}

function getBackground() {
    var numberOfImages = backgrounds().length,
        uniqueNumber = randomNumber(numberOfImages);
    return backgrounds()[uniqueNumber];
}

function showBackground() {
    document.body.style.backgroundImage = "url('" + getBackground() + "')";
    document.body.style.backgroundPosition = "center center";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundAttachment = "fixed";
}
window.onload = showBackground();
    </script>

[UPDATE 1]

If you have for exemple 10 pictures, then change imageURLs so it's should be something like

var imageURLs = ["http://img1.jpg","http://img2.jpg","http://img3.jpg","http://img4.jpg","http://img5.jpg","http://img6.jpg","http://img7.jpg","http://img8.jpg","http://img9.jpg","http://img10.jpg"];

No need to add the number 10 (in this example) anywhere cause actually the following get it automatically:

var numberOfImages = backgrounds().length;

So in my example, the number 10 (number of pictures I have) which is now obtained is used to generate a random number in range [0,max] with max=10 in our example. So we get the random number with the help of the function :

function randomNumber(max) {
  return Math.floor((Math.random() * max));
}

We call it under showBackground() with the help of:

uniqueNumber = randomNumber(numberOfImages);

Once we have uniqueNumber, we use it to get the url of one image stored under the function backgrounds() with :

return backgrounds()[uniqueNumber];

[UPDATE 2]

To continue with explanations, you have to add the script at the end of the the template HTML just before </html> (just tested it).

[UPDATE 3]

To achieve what you wanted to do with :

document.write("<style>");
document.write("body {");
document.write(' background:url("' + image[random] + '") no-repeat fixed center center;');
document.write(" }");
document.write("</style>");

we use the function showBackground()

And finaly to fix what you said which was: