This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

stylish new tab local file

Hi, I have been trying to customize the new tab background with the add on Stylish. The following is the code I have been using:

/* Set a wallpaper for the about:newtab page*/ @-moz-document url("about:newtab") {

 #newtab-scrollbox{
   background: url("file:///d:/Erika/CM.jpg") no-repeat !important;
   background-size: 100% !important;
  }

}

I tried several times but my effort was futile. Please help me!

Thank you in advance.

Hi, I have been trying to customize the new tab background with the add on Stylish. The following is the code I have been using: /* Set a wallpaper for the about:newtab page*/ @-moz-document url("about:newtab") { #newtab-scrollbox{ background: url("file:///d:/Erika/CM.jpg") no-repeat !important; background-size: 100% !important; } } I tried several times but my effort was futile. Please help me! Thank you in advance.

All Replies (6)

Firefox may have a security bar on this, I'm not sure. If you check for error messages in the Browser Console, can you see any objections like that?

You can open the console by pressing Ctrl+Shift+j or using "3-bar" menu button > Developer.

Then I suggest clicking the Clear button to flush out what's there, then switch over to your tab and reload it. Then check the console again.


A workaround is to convert your image to a data URI. I have used http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ for that. You can see how it looks by viewing the CSS on this rule: https://userstyles.org/styles/101036/brighter-background-tabs-australis-firefox-29

Can you open the image in a tab with that URL?

Does the code work in userContent.css ? It works for me on Linux with that file (I'm not using Stylish).


The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

You can use this button to go to the currently used Firefox profile folder:

  • Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)

I was able to get something similar to work but I had to change the namespace from XUL to HTML on the first line.

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url("about:newtab") {
    #newtab-scrollbox {
         background-image: url(file:///C:/Users/username/Pictures/filename.jpg) !important;
        background-size: 100%;
    }
}

Seems to be a glitch in Stylish.

Hi, thanks for your quick response.

I cleared things the console but unfortunately it still didn't work. Could you elaborate on what I should do with after converting my image to a data URI?

@namespace url(http://www.w3.org/1999/xhtml); ←What am I suppose to write here if the source is a local file?

@-moz-document url("about:newtab") {

   #newtab-scrollbox {
        background-image: url(file:///C:/Users/username/Pictures/filename.jpg) !important;
       background-size: 100%;
   }

}

Sorry but this is new to me! I appreciate your patience.

Hi StylishErika, go ahead and use that namespace listed in my post.

When you use the Stylish button > Write new style > For this URL

Stylish detects that it is a built-in page and uses this namespace:

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

However, that namespace doesn't work on this page, so you need to change it to

@namespace url(http://www.w3.org/1999/xhtml);

One way to do it is to delete the namespace line (top line of the rule) and, above the rule, click the Insert button, then HTML namespace by default.

Or you can paste it from here.