3

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...

  • The reason I asked this question and answered my question is just because I was looking for the answer for many months. But today I asked the Mozilla community, where I got a solution support.mozilla.org/en-US/questions/1271362 And I am sharing so that others can get the answer easily from here. Please mark as duplicate if this is one. I am happy to delete the question and answer altogether this if it's not helpful at all. – Sourav Goswami Oct 25 '19 at 19:56
8

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): Firefox about:support screenshot options

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

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

  2. 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.

  3. 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.

  1. 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.

  2. 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:

Firefox Home Tab screenshot, with custom background image

| improve this answer | |
  • 1
    Thanks you very much! Do you know why Firefox refuses to use a wallpaper from ~/Pictures and works only with wallpapers from /usr/share/backgrounds? – Sadi Dec 13 '19 at 8:32
  • 1
    Hi,thanks for let me knowing that. I am not exactly sure about why it doesn't work from other path rather than /usr/share/backgrounds or the chrome directory itself. I have updated the answer so that it will work on any system... – Sourav Goswami Dec 13 '19 at 18:06
  • 1
    Hey, does this works in the latest firefox ? I'm struggling to make it work. Also, my userChrome is enabled correctly. – aemonge Apr 29 at 11:09
  • Yes this worked for every single version released after I wrote the answer. Make sure you are opening the proper URL. Also, you can try putting the image in the same directory as the image. – Sourav Goswami Apr 29 at 20:17

Not the answer you're looking for? Browse other questions tagged or ask your own question.