Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

Is there a way to change only the background image for new tabs?

  • 10 uphendule
  • 3 zinale nkinga
  • 38258 views
  • Igcine ukuphendulwa ngu Thomas L

more options

Hi, I have attached 2 screenshots: 1. The background where I want to apply the image in firefox. 2. Chromium after changing the background.

Is there a way to change the background in Firefox to an image of my choice?

Hi, I have attached 2 screenshots: 1. The background where I want to apply the image in firefox. 2. Chromium after changing the background. Is there a way to change the background in Firefox to an image of my choice?
Ama-screenshot ananyekiwe

Okulungisiwe ngu Sourav

Isisombululo esikhethiwe

Thank you very much @cor-el for your solution. It worked. Here I will just modify what you said, so that others can benefit with the exact steps.

If you are using Firefox 70+ versions on Linux, like me:

1. Go to about:support. And look for the "Profile Directory" button. 2. On the opened directory, create a folder called "chrome" if it doesn't exist. 3. Create a file called userContent.css, and paste in the following contents: ``` @-moz-document url-prefix(about:home), url-prefix(about:newtab) { .click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #000 !important ; }

body { background: url(/usr/share/backgrounds/flowers-4564439.jpg) !important ; background-size: cover !important ; } } ``` Save the file and open Firefox (no need to restart at this point).

  • [replace the url(...) with the image path. Here, in my case I have images in the /usr/share/backgrounds direcotry]
  • [The `background-size: cover !important  ;` line here means that the image will be resized automatically].
  • [Everything is self explainatory here]

4. Open the url about:config, and change the option "toolkit.legacyUserProfileCustomizations.stylesheets" to true.

5. Restart firefox. It should look more awesome now!

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 0

All Replies (10)

more options
more options

I want to change ONLY the background image. Although they all change the boring static background colour with some nice images, they also replace the "Firefox Home Content" that I am used to. Using firefox with those extension makes Firefox complicated to me, and don't do what I wanted, at all...

Also, "Infinity New Tab (Pro)" by extfans looks awful to me. It's a crap full of ads, and tonnes of permissions. The search engine also got replaced with google custom search. The home page now has tiles of Amazon, Ebay, etc. I use Firefox because it respects my privacy. I can't install crap ad ons like that.

If needed I can use HTML, CSS, JS for that. But I don't yet know how to do all those to modify the look and feel for Firefox...

Okulungisiwe ngu Sourav

more options

You need to use code in userContent.css in the chrome folder to set a background to about:newtab and possibly to about:home. Best (easiest) is to place this image in the chrome folder.

@-moz-document url-prefix(about:home), url-prefix(about:newtab) {
 body{
  background: url(...) !important;
}
}

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

more options

Isisombululo Esikhethiwe

Thank you very much @cor-el for your solution. It worked. Here I will just modify what you said, so that others can benefit with the exact steps.

If you are using Firefox 70+ versions on Linux, like me:

1. Go to about:support. And look for the "Profile Directory" button. 2. On the opened directory, create a folder called "chrome" if it doesn't exist. 3. Create a file called userContent.css, and paste in the following contents: ``` @-moz-document url-prefix(about:home), url-prefix(about:newtab) { .click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #000 !important ; }

body { background: url(/usr/share/backgrounds/flowers-4564439.jpg) !important ; background-size: cover !important ; } } ``` Save the file and open Firefox (no need to restart at this point).

  • [replace the url(...) with the image path. Here, in my case I have images in the /usr/share/backgrounds direcotry]
  • [The `background-size: cover !important  ;` line here means that the image will be resized automatically].
  • [Everything is self explainatory here]

4. Open the url about:config, and change the option "toolkit.legacyUserProfileCustomizations.stylesheets" to true.

5. Restart firefox. It should look more awesome now!

Okulungisiwe ngu Sourav

more options

Is this the same process on windows? I tried but only ended up with a white background and not my image.

This is what I have in the .CSS file: @-moz-document url-prefix(about:home), url-prefix(about:newtab) {

   .click-target-container *, .top-sites-list * {
       color: #fff !important ;
       text-shadow: 2px 2px 2px #000 !important ;
   }
   body {
       background: url(C:\Users\thoma\Pictures\white-wolf-sw.jpg) !important ;
       background-size: cover !important ;
   }

}

more options

Did you make sure that you did everything correct?

  • file name: userContent.css (case sensitive) in the chrome folder in the profile folder
  • make sure that userContent.css doesn't have an extra hidden .txt or .css file extension

You can use the button on the "Help -> Troubleshooting Information" (about:support) page to go to the current Firefox profile folder or use the about:profiles page.

more options

Thomas L said

Is this the same process on windows? I tried but only ended up with a white background and not my image. This is what I have in the .CSS file: @-moz-document url-prefix(about:home), url-prefix(about:newtab) { .click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #000 !important ; } body { background: url(C:\Users\thoma\Pictures\white-wolf-sw.jpg) !important ; background-size: cover !important ; } }

Wrong URL. Not a valid url format.

more options

TyDraniu said

Thomas L said
Is this the same process on windows? I tried but only ended up with a white background and not my image. This is what I have in the .CSS file: @-moz-document url-prefix(about:home), url-prefix(about:newtab) { .click-target-container *, .top-sites-list * { color: #fff !important ; text-shadow: 2px 2px 2px #000 !important ; } body { background: url(C:\Users\thoma\Pictures\white-wolf-sw.jpg) !important ; background-size: cover !important ; } }

Wrong URL. Not a valid url format.

How should I write the URL?

more options

Open the file in a Firefox tab to get the correct file:/// URI.

more options

cor-el said

Open the file in a Firefox tab to get the correct file:/// URI.

It worked! Thank you!