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 have a background image on the home page and new tabs?

  • 2 antwoorde
  • 2 hierdie probleem
  • 22 views
  • Laaste antwoord deur 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:

https://superuser.com/questions/1495946/how-do-i-change-the-background-image-of-home-page-in-firefox

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!

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: https://superuser.com/questions/1495946/how-do-i-change-the-background-image-of-home-page-in-firefox 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!
Aangehegde skermkiekies

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!