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

change default image style

  • 2 replies
  • 8 have this problem
  • 1056 views
  • Last reply by brennr_rose

more options

I used the add-on "Old Default Image Style" for years to display image files in Firefox so that they would not be automatically centred on a black background which is the default. After upgrading to Quantum, the add-on is no longer supported. Is there any way modify the default image display to turn off the default centering and black background?

This is my only issue with the upgrade so far.

Thanks!

Chosen solution

This is a bit tricky because the only way I know to override the dark background on stand-alone image pages is going to affect all pages. That said, most pages either specify a body background color or leave it white, so perhaps that's not a problem?

@media not print{
  /* De-center the image if it's the very first element in a page body */
  body > img {
    margin: 0 !important;
  }
  /* Create a global off-white background */
  html {
    background-color: #fafafa !important;
  }
}

That style rule would go into a userContent.css file. More info on that file: http://kb.mozillazine.org/UserContent.css

Read this answer in context 👍 2

All Replies (2)

more options

Chosen Solution

This is a bit tricky because the only way I know to override the dark background on stand-alone image pages is going to affect all pages. That said, most pages either specify a body background color or leave it white, so perhaps that's not a problem?

@media not print{
  /* De-center the image if it's the very first element in a page body */
  body > img {
    margin: 0 !important;
  }
  /* Create a global off-white background */
  html {
    background-color: #fafafa !important;
  }
}

That style rule would go into a userContent.css file. More info on that file: http://kb.mozillazine.org/UserContent.css

more options

That works very well! Thanks for your incredibly fast reply. I appreciate your help.