home page custom url + standard info as overlay over custom url
I followed the instructions to show image as custom url (thanks), but now my normal home page data doesn't show up. I would like the normal data, favorite sites, article recommendations..., to show up as a clickable overlay over the custom-url-background.
also, pressing c-t nets a second tab, but now it doesn't show the custom background but does show the normal home-screen information. Is there a way to combine the two?
Chosen solution
Hi tomsawyerinsanjose, there is not an easy way to modify the built-in Firefox Home / new tab page background. Add-ons can completely replace the new tab page with something else, but not modify the built-in one.
There is one technique you can use to replace the background, but it may take some experimentation. It involves creating a style sheet file in a specific location, which is also where you would put the image file. I'm going to test out some steps I saw in another thread and see how it goes and then report back.
But in the meantime, if you think replacing the page might work for you, check out this add-on: https://addons.mozilla.org/firefox/addon/new-tab-tools/
Read this answer in context 👍 0All Replies (2)
Chosen Solution
Hi tomsawyerinsanjose, there is not an easy way to modify the built-in Firefox Home / new tab page background. Add-ons can completely replace the new tab page with something else, but not modify the built-in one.
There is one technique you can use to replace the background, but it may take some experimentation. It involves creating a style sheet file in a specific location, which is also where you would put the image file. I'm going to test out some steps I saw in another thread and see how it goes and then report back.
But in the meantime, if you think replacing the page might work for you, check out this add-on: https://addons.mozilla.org/firefox/addon/new-tab-tools/
Here is something you can experiment with. It's about a 10 minute project if everything goes smoothly.
Note: if you already have a userContent.css file, you just need to add the rules you download in Step (A) to your existing file and make the edit noted in Step (E).
(A) Download the following file
https://www.userchrome.org/samples/userContent-new-tab-background.css
Use the downloads list on the toolbar to open the downloads folder directly to the new userContent-new-tab-background.css file. (Sample screenshot attached.)
If you want to download the sample background image, it's here (use right-click > Save Link As otherwise it will just open in a tab):
https://www.userchrome.org/samples/beach.jpg
(B) Create a new chrome folder in your profile folder
The following article has the detailed steps for that (#1, #2, and I recommend #3)
https://www.userchrome.org/how-create-userchrome-css.html
I have videos for Windows and Mac in case the text is not clear.
(C) Set Firefox to look for userContent.css at startup -- see step #6 in the above article.
(D) Move the userContent-new-tab-background.css file you downloaded in Step A into the chrome folder you created in Step B
You could copy/paste, drag/drop, etc. Same with the sample image if you downloaded that.
(E) Rename the userContent-new-tab-background.css to just userContent.css
For example, right-click the file, click Rename, then remove -new-tab-background and press Enter to save the new name.
(F) Modify the file to point to your own image
(1) Copy/paste your actual background image file into the chrome folder
(2) Edit the userContent.css file to refer to your background image -- you need to use a plain text or code editor for this to make sure no formatting instructions are added to the file. Just change the part in parentheses on line 6:
--myImageUrl: url(beach.jpg);
Okay, now, finally, the next time you exit Firefox and start it up again, it should discover that file and apply the rules to the new tab page. Example screenshot attached.
Success?
