Change new tab background image randomly from my own selection but keep the same layout (Firefox)

Question

There is a feature on Brave browser that lets you upload a bunch of images and then whenever you open a new tab, it will pick randomly from those and use it as the background.

I wanted to do the same thing with Firefox and I've looked around the available extensions for Firefox but most of the ones I've seen completely change how the new tab page looks. What I want is to retain the original layout/features but just change the background image to a random one chosen from a pool of images that I specified. All the addons I see seem to be too complicated for the simple task that I want to happen. I'm not sure if I've just missed the ideal one by chance.

Is there a way to achieve this? To be clear, I don't want a different new tab layout, I want what comes with Firefox by default, I just want random background images for it.

Answer 1

Note: This is not random and is for a single background image. Randomness may be possible with userChrome.js but I am unfamiliar with its usage.

userContent.css

You can use userContent.css (similar to userChrome.css) to modify the CSS of the new tab page in Firefox.

1. Create or modify your userContent.css file and include the following code:

@-moz-document url("about:newtab") {
    body {
        background: url('background.jpg') !important;
        background-size: cover !important;
    }
}

2. Copy the image you want to use as background to the same location.

3. Restart Firefox.

userChrome.js

If you do want to randomize it, that may be possible with JavaScript in userChrome.js. I'm not familiar with the usage of such scripts. The general idea would be to number your images such as background1.jpg, background2.jpg, etc. and just get a random number in JavaScript. Then use that filename instead.