How to hide website background images by default?

Nowadays, most background images on websites are defined in a CSS stylesheet by the rule body {background:foo;}

In Firefox, users can define custom CSS stylesheets that get applied to webpages that are loaded. When you specify a value in that custom stylesheet for a CSS-selector that is defined in the webpage that you load, those two values are treated as equally weighted and the question of which value gets applied in such case, depends on which value gets parsed last from the CSS. To give our custom value more weight over the value for body {background:foo;}, we add the tag !important to our rule. That way, it will be preferred by the browser to load, no matter which of the two values get parsed first or last.

To begin, let’s create our custom CSS file:

• Open Firefox and press ‘Alt’ key to show the top menu,
  then click on ‘Help’ –> ‘Troubleshooting Information’
• Click the ‘Show Folder’ button beside the ‘Profile Folder’ entry
• Open the folder named chrome in folder that has opened in windows explorer
• If the folder does not exist, create a folder named chrome and open it
• Create CSS file with the name userContent.css . To create it, you can create a .txt file and rename it.

• Copy one of the following codes to userContent.css

• For painting the background of every webpage you visit in white color, paste following code

  body {
  background:white !important;
  }
  

• If you only target callofduty.wikia.com, which you linked, paste following code

  @-moz-document domain(callofduty.wikia.com) {
  body {
  background:white !important;
  }
  }
  

• To improve readability a little more on callofduty.wikia.com, you could paste that code

  @-moz-document domain(callofduty.wikia.com) {
  body {
  background:white !important;
  color:black !important;
  }
  }
  

• When you are done editing the .css file, save it and restart Firefox.

For the other website that you linked, I could not figure out how to change the background there. So if you use the first code that I posted, be warned that it won’t work with every website.

Using the technique described above, you can replace the color white with any other color and specify any existing CSS rule you can think of in our custom CSS file. If you later get rid of the changes you made, you can delete or rename the .css file we just created. On many webpages, following code will also work well to get rid of some background image without messing with the background color:

body {
background:none !important;
}

Concerning your question if the background image is hidden or blocked from loading, I’m not sure if it gets loaded without being displayed, using the method described above.

Sources:
Rauf @superuser.com: How to override the CSS of a site in Firefox with userContent.css?

Sarah Maddox: “How to override CSS stylesheets in Firefox”

IT Support Guides: “How to use a custom style sheet (CSS) with Firefox”