Is there a way to have a background image on the home page and new tabs?
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!
All Replies (2)
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?
Thank you, I will try it!