We're calling on all EU-based Mozillians with iOS or iPadOS devices to help us monitor Apple’s new browser choice screens. Join the effort to hold Big Tech to account!

This site will have limited functionality while we undergo maintenance to improve your experience. If an article doesn't solve your issue and you want to ask a question, we have our support community waiting to help you at @FirefoxSupport on Twitter and/r/firefox on Reddit.

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

How can I disable the white image background on Transparent PNGs? (After Firefox 15)

  • 6 cavab
  • 21 have this problem
  • 4 views
  • Last reply by jaws

more options

Hello.

I understand that after the Firefox 15 update, transparent images have been given a white background (like in older versions). I personally prefer the dark-grey background. Is there any way to disable the image's background?

Please see this image: http://i.imgur.com/0suFk.png

Perhaps using the about:config module there is an option where I may disable the white background? Thanks.

Hello. I understand that after the Firefox 15 update, transparent images have been given a white background (like in older versions). I personally prefer the dark-grey background. Is there any way to disable the image's background? Please see this image: http://i.imgur.com/0suFk.png Perhaps using the about:config module there is an option where I may disable the white background? Thanks.

Chosen solution

I think you would need to create a custom style rule for this change. I don't know the most selective approach, but this works and you could watch for side effects.

(1) Install the Stylish extension: https://addons.mozilla.org/firefox/addon/stylish/

(2) After restarting Firefox, click the Stylish "S" icon on the Add-on bar > Write new style > Blank Style

(If you do not usually display the Add-on bar, press Ctrl+/ to display it. If the "S" icon is not there, drag it from the Customize dialog, which you can show using Alt+v > Toolbars > Customize)

(3) In the editor, paste this:


@namespace url(http://www.w3.org/1999/xhtml); body > img.decoded{ background-color: transparent !important; }

(4) Give it a name, and click Save.

Read this answer in context 👍 3

All Replies (6)

more options

Seçilmiş Həll

I think you would need to create a custom style rule for this change. I don't know the most selective approach, but this works and you could watch for side effects.

(1) Install the Stylish extension: https://addons.mozilla.org/firefox/addon/stylish/

(2) After restarting Firefox, click the Stylish "S" icon on the Add-on bar > Write new style > Blank Style

(If you do not usually display the Add-on bar, press Ctrl+/ to display it. If the "S" icon is not there, drag it from the Customize dialog, which you can show using Alt+v > Toolbars > Customize)

(3) In the editor, paste this:


@namespace url(http://www.w3.org/1999/xhtml); body > img.decoded{ background-color: transparent !important; }

(4) Give it a name, and click Save.

more options

The OP is right, there has got to be a way to change this is the about:config module.

I want to remove the white background also, and I don't want to install and add-on just to do that.

Can we get some pros on this asap please :D

more options

Hi greyhood, you can add custom style rules to userContent.css and userChrome.css if you don't want to use the Stylish add-on.

I will let a pro explain how to do it. ;-)

more options

haha i knew saying the word pro was going to stir the pot a little bit, that's what i said it :D

anyway, i appreciate your support for the alternative method, just waiting for a non-add-on fix

more options

You can also experiment with code like this in the userContent.css file.

html > body > img:only-child {
 background-color: #FFF !important;
 box-shadow: none !important;
 margin: auto !important;
}
more options

Thanks for your feedback. I made a restartless add-on that will revert the behavior of standalone images to be rendered against the grey background.

https://addons.mozilla.org/en-US/firefox/addon/transparent-standalone-imag/

You can install this add-on and then it will all happy time :)