Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

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

Lolu chungechunge lwabekwa kunqolobane. Uyacelwa ubuze umbuzo omusha uma udinga usizo.

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

  • 6 uphendule
  • 21 zinale nkinga
  • 4 views
  • Igcine ukuphendulwa ngu 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.

Isisombululo esikhethiwe

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.

Funda le mpendulo ngokuhambisana nalesi sihloko 👍 3

All Replies (6)

more options

Isisombululo Esikhethiwe

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 :)