Join the Mozilla’s Test Days event from Dec 2–8 to test the new Firefox address bar on Firefox Beta 134 and get a chance to win Mozilla swag vouchers! 🎁

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

home page custom url + standard info as overlay over custom url

more options

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?

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/

Ler a resposta no contexto 👍 0

All Replies (2)

more options

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/

more options

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?