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

Is there a way to have a background image on the home page and new tabs?

  • 2 replies
  • 2 have this problem
  • Last reply by tom232

more options

I'd like to be able to set a background image in Firefox in new tabs and on the blank home page but for some reason I'm unable to do so...

I tried following the instructions on this page:

but my new tabs and homepage still come up as blank white. Is there a way to tell if Firefox is even looking at the css file?

I'm using Windows 7 and Firefox 84.0.2 (64 bit)

Thank you in advance!

Attached screenshots

All Replies (2)

more options

For the new tab page (about:newtab), you could try this which I worked on for another thread in Firefox 78+ when the page layout changed a bit. The colors need to be modified to your taste:

/*** Firefox Home / new tab page Mods (for Firefox 78) ***/
@-moz-document url(about:home), url(about:newtab) {

  /* IMPORTANT: Set the file name or URL (example of file in the chrome folder */
  :root {
    --myImageUrl: url(tassellation18.jpg);
  /* OPTIONAL: Modify your preferred background color for text */
  :root {
    /* Light theme (dark text) -- 60% opacity / 40% transparent */
    --myLightBGcolor: rgba(249, 249, 250, 0.6);
    /* Dark theme (light text) -- 60% opacity / 40% transparent */
    --myDarkBGcolor: rgba(42, 42, 46, 0.6);

  /*** Insert Background Image ***/
  body::before { 
    /* user generated content to avoid weird margin issues */
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    background-image: var(--myImageUrl);
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-origin: border-box;
    background-position: center;

  /*** Fix unreadable titles ***/

  /* Persistent background color on section titles */
  .click-target-container { 
    background-color: var(--myLightBGcolor);
    border-radius: 4px;
    margin-left: -4px; padding-left: 4px;
    margin-right: -4px; padding-right: 4px;
  /* if it's a dark theme (light text) */
  [lwt-newtab-brighttext="true"] .click-target-container { 
    background-color: var(--myDarkBGcolor);

  /* Add background color when mouse enters section title or body */
  section.collapsible-section:hover { 
    background-color: var(--myLightBGcolor);
    border-radius: 4px;
  /* if it's a dark theme (light text) */
  [lwt-newtab-brighttext="true"] section.collapsible-section:hover { 
    background-color: var(--myDarkBGcolor);

The "blank" home page isn't the same as about:home, which has the contents of about:newtab. The blank Home page is about:blank which is used in numerous places so I don't recommend filling it with a picture.

If you want your home page to be nothing but the picture, maybe you could figure out the URL to the image file and set that as your home page? Try dragging the image from the chrome folder into a Firefox tab, and then drag and drop the little document icon at the left end of the address bar onto the house icon. Firefox should ask if you want to make this your new home page.

Does that work?


more options

Thank you, I will try it!


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.