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 replies
  • 21 have this problem
  • 452 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.

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

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.

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