How do I change the background image of Home page in Firefox?

I want to change the look and feel of the boring home page of Firefox browser by changing the background image to something I want.

Basic system details:

• OS: GNU/Linux
• Firefox Version: 72.0a1 (2019-10-22) (64-bit)

It would be better for me if I can do that without ad-ons...

1 Answer

In Firefox, there's no way to change the background image of the home page (new tab) from the Settings. Add-ons can surely do that, but there's a better approach: We can create a CSS file and tell Firefox to load that file when it starts.

To do so, follow these steps:

1. Go to about:support in the address bar. View the section "Application Basics" ➔ Profile Directory (or "Profile Folder" on MacOS) ➔ click the button "Open Directory" (or "Show in Finder" on MacOS):

It should open your Firefox profile directory, which is usually in your $HOME directory.

2. Create a directory called chrome inside the opened directory, if it's not already there.

3. Go to the chrome directory and (a) create a directory called img and (b) create a file called userContent.css. Move your image to the img directory.

4. Open userContent.css in any text editor and paste the following code:

@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing) { .click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #222 !important ; } body::before { content: "" ; z-index: -1 ; position: fixed ; top: 0 ; left: 0 ; background: #f9a no-repeat url(img/cherry-blossom-1260646.jpg) center ; background-size: cover ; width: 100vw ; height: 100vh ; }
}

Don't forget to change the file name in url(img/cherry-blossom-1260646.jpg) to your preferred image.

Save the file and quit the editor.

5. Go to the url about:config, accept the risk (we will not really do anything harmful here, nothing to worry about), and in the Search Bar, paste toolkit.legacyUserProfileCustomizations.stylesheets, and set the value to true. This tells Firefox to load the CSS file at startup.

6. Restart Firefox if it's running.

Explanation to the CSS code

A

@-moz-document url(about:home), url(about:newtab), url(about:privatebrowsing)

Enables the background on Home Tabs, New Tabs, and in Private Browsing tabs.

B

.click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #222 !important ;
}

Changes the "Top Sites" and "Highlights" colours to white with a dark text-shadow. For lighter wallpaper, you need to edit the colours to make it look more comfortable to you.

C

body::before { content: "" ; z-index: -1 ; position: fixed ; top: 0 ; left: 0 ; background: #f9a no-repeat url(img/cherry-blossom-1260646.jpg) center ; background-size: cover ; width: 100vw ; height: 100vh ;
}

loads the image (here, img/cherry-blossom-1260646.jpg) to body::before which has a fixed position and the width and height of the viewport. If the background image is loading or not found, the background colour is set to #f9a.

The background-size: cover makes it auto adjustable with Firefox and zoom in/out doesn't affect the image size.

On GNU/Linux and Unix systems, you can load images from the /usr/share/backgrounds/ as well.

After a restart Firefox should look something like this: