Firefox can put a wallpaper on its New Tab page without editing a profile. Use that route for a fast visual change, choose a theme when you also want new toolbar colors, and keep CSS for a fixed local image on every new tab.
Choose the background you want to change
A New Tab wallpaper sits behind New Tab content. A theme changes Firefox browser chrome, including the toolbar and menus. Custom CSS targets internal Firefox pages such as about:home and about:newtab.
The dark window above is browser chrome, not a New Tab wallpaper. Pick the method that changes the surface you care about.
Set a New Tab wallpaper
Open a new tab and choose Customize or the gear icon. In Wallpapers, choose a supplied image or upload one when your Firefox build shows that control. Mozilla documents wallpapers as a New Tab setting, so websites keep their own backgrounds.
- Open a new tab.
- Open Customize, then choose Wallpapers.
- Select a supplied wallpaper or upload an image when Firefox offers the control.
- Open another new tab to confirm the image remains selected.
If Wallpapers is absent, update Firefox and check Mozilla’s current New Tab documentation. The panel on your installation decides which controls are available.
Use a theme for the toolbar and menus
A theme changes the color scheme for Firefox menus and system pages, and it can add artwork behind the toolbar. Mozilla maintains a theme catalog and explains theme behavior on its Firefox customization page.
Open the Firefox menu, choose Add-ons and themes, then select Themes. A New Tab wallpaper and a theme can coexist because they affect different browser surfaces.
Use userContent.css for one specific image
Choose CSS when the built-in wallpaper picker cannot use the image you need, or when you want the same local image on about:home and about:newtab. Firefox treats profile stylesheets as an advanced customization, so a short rule is easier to maintain after a browser update.
Open about:support and use the Profile Directory control shown above. Do not guess a profile name because Firefox can have more than one profile.
Create a chrome folder inside that active profile. It belongs to Firefox, not the system Chrome browser.
Inside chrome, create userContent.css and replace the file URL with an absolute path to your image.
@-moz-document url-prefix("about:home"), url-prefix("about:newtab") {
body {
background: url("file:///home/you/Pictures/firefox-wallpaper.jpg") center / cover fixed !important;
}
}
The selector changes only home and New Tab pages. cover fills the page and can crop the image on a narrow window.
Open about:config, search for toolkit.legacyUserProfileCustomizations.stylesheets, and set it to true. Restart Firefox after saving userContent.css.
If the background does not appear, verify the active profile, the userContent.css file name, and the file:/// image URL.
Keep the change maintainable
When one background rule turns into a collection of browser changes, a broader Firefox interface CSS customization is the better reference, especially when you also want to keep privacy choices and performance checks near the appearance change.
Use the Firefox ESR release path when you need slower-moving browser releases. Pair it with Firefox privacy settings and browser tweaks or Firefox’s built-in task manager when the browser needs more than an appearance change. If your distribution ships Firefox as a Snap and that package does not suit your setup, see replacing the Firefox Snap package with a Debian package.
FAQ
Can I add my own image as a Firefox New Tab background?
Firefox can show a supplied New Tab wallpaper and, in builds that expose the upload control, an image you choose. Use the Customize panel on a new tab to see the choices available in your Firefox version.
What is the difference between a Firefox theme and a New Tab wallpaper?
A theme changes Firefox browser chrome such as toolbar colors and menus. A New Tab wallpaper changes the background behind New Tab content. You can use both at the same time.
Why is my userContent.css background not showing?
Confirm that userContent.css is inside the chrome folder of the active Firefox profile, the file URL uses an absolute path, and toolkit.legacyUserProfileCustomizations.stylesheets is set to true in about:config. Restart Firefox after changing the file.
Start with the New Tab Customize panel. Move to userContent.css only when you need one local image every time Firefox opens a new tab.