2

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
6

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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