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

Solution 1:

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: