Search Support

Beware of phishing attacks: Mozilla will never ask you to call a number or visit a non-Mozilla website. Please ignore such requests.

Learn More

How to add image to my firefox home page / newtab page?

  • 3 replies
  • 1 has this problem
  • 24 views
  • Last reply by me

more options

I am trying to add my own background to the home page but cannot find any way to do it. There must be an option for something so simple somewhere, but I cannot find it. I do not want to install an add-on for this as I am not comfortable handing out my personal info to some random guy or group to accomplish something so simple. Thanks.

Chosen solution

That would be code like this in userContent.css. Place the image in the same chrome folder in the profile folder as userContent.css.

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

See also:

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.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

Read this answer in context 👍 1

All Replies (3)

more options

"Something so simple" isn't really all that "simple". Without an add-on / extension that can be done via the use of a userContent.css file and the appropriate CSS coding.

http://kb.mozillazine.org/UserContent.css
https://developer.mozilla.org/en-US/docs/Web/CSS
https://www.reddit.com/r/FirefoxCSS/comments/b1jsal/how_to_edit_newtab_page_in_usercontentcss/

I have done that in the past, but I got rusty with doing that since Austrailis Firefox 29 was released, when so many extensions were available, such as Stylish which made is "easy" to play with both userChrome and userContent css files "live" and needing to restart Firefox after every change in css code. Haven't bothered with Quantum 57+ or reverting to userContent.css (again). I guess I was spoiled my Austrailis and its' day in the sun.

Helpful?

more options

Chosen Solution

That would be code like this in userContent.css. Place the image in the same chrome folder in the profile folder as userContent.css.

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

See also:

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.

  • toolkit.legacyUserProfileCustomizations.stylesheets = true

See:

Helpful?

more options

@the-edmeister Thank you for your reply. It is unfortunate that Firefox makes "simple" things complicated. I have moved on to Vivaldi browser which is waaay ahead and makes the simple stuff...........simple. They also do not push people to use extensions for every little tweak because, as we know well, extensions are a security NIGHTMARE. Hopefully Mozilla will make their browser a little more user friendly moving forwards (as well as this site!) and not push everyone to install extensions for basic functionality, or need expert level CSS skills.

Helpful?

Ask a question

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.