We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

Цей вебсайт матиме обмежену функціональність, доки ми проводимо його обслуговування для поліпшення роботи. Якщо прочитана стаття не розв'язала вашу проблему і ви хочете поставити питання, наша спільнота підтримки з радістю допоможе вам на @FirefoxSupport у Twitter та /r/firefox на Reddit.

Шукати в статтях підтримки

Остерігайтеся нападів зловмисників. Mozilla ніколи не просить вас зателефонувати, надіслати номер телефону у повідомленні або поділитися з кимось особистими даними. Будь ласка, повідомте про підозрілі дії за допомогою меню “Повідомити про зловживання”

Докладніше

Ця тема перенесена в архів. Якщо вам потрібна допомога, запитайте.

stylish new tab local file

more options

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.

Усі відповіді (6)

more options

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

more options

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)
more options

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.

more options

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?

more options

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

more options

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.