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

Customizing firefox ... set my own background image for all pages I open in Internet.

  • 2 replies
  • 1 has this problem
  • 4 views
  • Last reply by cor-el

more options

The idea is in using my own *.css file as primary for all sites, i open in firefox (or just my own background image). So that this image replaces the background for all sites I open in Internet.

 Maybe there is a file available in firefox 17.1 for this (maybe UserContent.css).


 Thanks a lot.
The idea is in using my own *.css file as primary for all sites, i open in firefox (or just my own background image). So that this image replaces the background for all sites I open in Internet. Maybe there is a file available in firefox 17.1 for this (maybe UserContent.css). Thanks a lot.

All Replies (2)

more options

Yes, you can use userContent.css for this, but it's simpler to use the Stylish extension instead.

You would then use something like this:

@-moz-document url-prefix("http://"), url-prefix("https://") {

body {
  background: url("file:///C:/My%20Pictures/Wallpaper/image.jpg") !important;
  color: black !important;
}

*:not(body):not(input):not(textarea):not(button) {
  background: transparent !important;
  color: inherit !important;
}

/* Unvisited link */
a:link {
  color: blueviolet !important;
}

/* Visited link */
a:visited {
  color: indigo !important;
}

/* Link with the mouse cursor over it */
a:hover {
  color: lightblue !important;
}

/* Clicked link */
a:active {
  color: red !important;
}

}
  • To get the path of the image to use as the background, open it in Firefox and copy the URL from the address bar. Otherwise, keep in mind the protocol is file:/// that spaces must be replaced with %20 and that forward slashes must be used instead of backslashes (the latter is what Windows Explorer uses).
  • Remember to define appropriate colors for text and links, otherwise they will end up unreadable against your background image.
  • Even so, you can expect uneven results. Take this page for instance. “Post reply” isn't an actual button, but a link element styled to look like a button. There's no way to change these on all sites; they must be styled on a case-by-case basis. Another issue are images (e.g. the mozilla support graphic here), which might end up unviewable against your background image.
  • If you need help writing CSS, see https://developer.mozilla.org/en-US/learn/css or http://forum.userstyles.org
more options

Note that using the !important; flag will override any background provided by web pages and may interfere with (desired) content.
You can't override this unless you (temporarily) rename the userContent.css file.
So it is best to use Stylish in cases like this that allows to disable style rules easily (You would need to use the DOM Inspector to disable style rules from userContent.css)
Code for links need to be in the order as posted above (LVHA) to work properly.