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

Hierdie gesprek is in die argief. Vra asseblief 'n nuwe vraag as jy hulp nodig het.

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

  • 12 antwoorde
  • 1 het hierdie probleem
  • 123 views
  • Laaste antwoord deur cor-el

more options

Hi, this question has been asked before. I have followed all the steps given that thread but still no result.

question link : https://support.mozilla.org/en-US/questions/1271362#question-reply

According to the steps the contents of the css file that I have created are : ```@-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(file:///C:/Users/Akshay & Anjali/Pictures/SavedPictures/1.jpg) !important ; background-size: cover !important ; } }```

I have also attached the pictures of page where chrome folder is in my computer.

please let me know what i can change.

thanks

Hi, this question has been asked before. I have followed all the steps given that thread but still no result. question link : https://support.mozilla.org/en-US/questions/1271362#question-reply According to the steps the contents of the css file that I have created are : ```@-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(file:///C:/Users/Akshay & Anjali/Pictures/SavedPictures/1.jpg) !important ; background-size: cover !important ; } }``` I have also attached the pictures of page where chrome folder is in my computer. please let me know what i can change. thanks
Aangehegde skermkiekies

Gekose oplossing

The image shows correctly if you open the link in a new tab ?

You can try to place the 1.jpg image in the chrome folder with userContent.css.

  • background: url("1.jpg") !important;
Lees dié antwoord in konteks 👍 1

All Replies (12)

more options

The chrome folder needs to be located inside of one of your profile folders (the one Firefox uses).

I'm also assuming that you have a userContent.css file in that folder, not a userChrome.css or userContent.css.txt file.

more options

Wesley Branton said

The chrome folder needs to be located inside of one of your profile folders (the one Firefox uses). I'm also assuming that you have a userContent.css file in that folder, not a userChrome.css or userContent.css.txt file.

I noticed after reading your comment that name of the css file was different so I changed it to userContent. The new tab page is still blank. the URL on opening the image in a firefox tab is : file:///C:/Users/Akshay%20&%20Anjali/Pictures/Saved%20Pictures/1.jpg Should i copy and paste this exact text or should i change it

more options

Still chrome is outside of your profile folder.

more options

You may also have to check these prefs on the about:config page.

  • layout.css.moz-document.content.enabled = true
  • layout.css.moz-document.url-prefix-hack.enabled = true
more options

cor-el said

You may also have to check these prefs on the about:config page.
  • layout.css.moz-document.content.enabled = true
  • layout.css.moz-document.url-prefix-hack.enabled = true

Thanks for replying, I have changed these preferences to true as you mentioned. The new tab page is still the same. I have attached some screenshots. Please see if the problem lies there.

Gewysig op deur kakshay2100

more options

Is this pref also set ?

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

I don't thinkthe %20 works in a CSS file, so you need to replace them with an actual space (" ") character.


@-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(file:///C:/Users/Akshay & Anjali/Pictures/SavedPictures/1.jpg) !important;
  background-size: cover !important;
 }
}
more options

cor-el said

Is this pref also set ?
  • toolkit.legacyUserProfileCustomizations.stylesheets = true
I don't thinkthe %20 works in a CSS file, so you need to replace them with an actual space (" ") character.
@-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(file:///C:/Users/Akshay & Anjali/Pictures/SavedPictures/1.jpg) !important;
  background-size: cover !important;
 }
}

Thanks for replying again, yes the preference you mentioned is also set to true. I have also replaced the css document text with the one in your reply. New tab page is still the same.

Sorry for bothering everyone so much.

more options

Are you using Firefox Home as the new tab page or are you using the blank page? Try adding a url prefix for about:blank and see if that makes a difference.

Also, if you haven't been doing this already, you need to restart Firefox whenever you make changes to the CSS or the preferences listed above.

more options

Wesley Branton said

Are you using Firefox Home as the new tab page or are you using the blank page? Try adding a url prefix for about:blank and see if that makes a difference. Also, if you haven't been doing this already, you need to restart Firefox whenever you make changes to the CSS or the preferences listed above.

Yes, I am using Firefox home as the new tab page. I have also restarted several times.

more options

Gekose oplossing

The image shows correctly if you open the link in a new tab ?

You can try to place the 1.jpg image in the chrome folder with userContent.css.

  • background: url("1.jpg") !important;
more options

cor-el said

The image shows correctly if you open the link in a new tab ? You can try to place the 1.jpg image in the chrome folder with userContent.css.
  • background: url("1.jpg") !important;

THANK YOU SO MUCH! IT WORKED. I was going to give up on this, but this did the trick. Thanks a lot

more options

Spaces in file names and file paths can be a recipe for miss/hit cases and are best avoid.

Adding quotes around the file:// link might have worked as well.