Obsah

---

To customize the new tab experience, there are many extensions that enable you to select a background image, can display weather, latest pages you’ve visited and whatnot. But maybe you don’t want an extension for something that simple, right? You just want to see there an image and nothing else.

No extension is needed for this, indeed.

TL;DR: You need to create a CSS stylesheet with the path to the image for Firefox’s new tab, allow user profile customizations in about:config, and restart Firefox.

1. Go to URL about:config (confirm the warning with Accept the Risk and Continue) and set the key toolkit.legacyUserProfileCustomizations.stylesheets to true.
2. Go to URL about:support and find the path to your Firefox profile (the Profile Directory line in the table).
   For me, it’s /home/myusername/.mozilla/firefox/p3qnbsvi.personal
3. In that directory, create a chrome directory if it doesn’t exist already.
4. In the chrome directory,
   1. copy your background image to it (for example, myBackground.webp),
   2. create a file userContent.css.
5. Copy the CSS code from below to the .css file.
6. Restart Firefox.
7. Hopefully, your image now show as background when you open a new tab.

@-moz-document url-prefix(about:home), url-prefix(about:newtab), url-prefix(about:blank) { .click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #000 !important ; }
body { background: url(initial_d.webp) !important; background-size: cover !important; background-repeat: no-repeat; } }

Update the name of the background image file in body { background: url(**myBackground.webp**). Also, the file doesn’t need to be right next to the CSS file but it’s easier to manage. If you have the image elsewhere, provide a full path to it. The file type can be WEBP, PNG, JPG, … anything Firefox can natively consume.

What does the code say?

The first line with the @-moz-document url-prefix... stuff defines where to show the image:

• Firefox’s home page (about:home)
• Firefox’s new tab page (about:newtab)
• Firefox’s blank page (about:blank)

This basically coveres all the options you can set for a new tab page in about:preferences#home.

Then there’s styling for the stuff on the home page (shadows for texts and some colors). You can leave that out if you’re using about:blank for your new tab.

And the last line is definition of the background image which says where to find the image and how to scale it (in our case here it’s to resize and not repeat so it covers the whole screen as best as possible without cropping and distorting the image’s aspect ratio).

Attribution

Sourav’s answer on Mozilla Support forum.