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

Is there any fix to show transparent png background instead of black ?

  • 8 replies
  • 4 have this problem
  • 1 view
  • Last reply by cor-el

more options

When I try to load a png file with transparent background into firefox 35.0.1, the background appears black. I've already tried Transparent standalone images add-on with no results . Also there is not an option in about:config to fix this . Can I have your support please ? thanks.

When I try to load a png file with transparent background into firefox 35.0.1, the background appears black. I've already tried Transparent standalone images add-on with no results . Also there is not an option in about:config to fix this . Can I have your support please ? thanks.

Chosen solution

You shouldn't place the code for the body in the userContent.css file as this will always use this background color. I only posted the links to those CSS files to show what rules are used by Firefox. So only leave the code for image.decoded in the file.

@media not print { img.decoded { background: none!important; } }

Normally you would use this extension or one of the others to get a more reliable code.

Read this answer in context 👍 1

All Replies (8)

more options

hello, you could try to put the following code into the userChrome.css file...

@media not print { img.decoded { background: none!important; } }

http://kb.mozillazine.org/index.php?title=UserChrome.css

more options

See also the CSS file that Firefox uses (open via the location bar):

  • chrome://global/skin/media/TopLevelImageDocument.css
  • resource://gre/res/TopLevelImageDocument.css

That code should probably be in userContent.css and not in userChrome.css

The customization files userChrome.css (user interface) and userContent.css (websites) are located in the chrome folder in the Firefox profile folder.

You can use this button to go to the currently used Firefox profile folder:

more options

First of all thank you for your time ,

I have to admit that I'm noob in css but I've tried the above mentioned methods . The black background behind the standalone png loaded images is it still there ...

I've create the Chrome folder in the specified location (C:\Users\...\AppData\Roaming\Mozilla\Firefox\Profiles\...698\chrome), also I've create both files one by one userContent.css / userChrome.css ,paste inside this line :

@media not print { img.decoded { background: none!important; } }

no magic :P Not so sure if I understood right , how can I tweak these css's in order to solve this issue please ?

•chrome://global/skin/media/TopLevelImageDocument.css •resource://gre/res/TopLevelImageDocument.css thanks,

Modified by mozilla_user78

more options

Hi! mozilla_user78. I'll try to explain what cor-el says. Everything should go in userContent.css so remove the text from userChrome.css. Copy and paste the text chrome://global/skin/media/TopLevelImageDocument.css to the address bar (aka url bar/location bar) and copy the text there into userContent.css and do the same with resource://gre/res/TopLevelImageDocument.css.

A little explanation what the two css files do. (From http://kb.mozillazine.org/Editing_configuration) "To modify the way in which Web pages and e-mails are displayed, you should edit the userContent.css file. To modify the appearance of the application itself, you should edit the userChrome.css file."

Modified by DaveAdd

more options

Hello there Dave, all the content in the same file userContent.css (I guess)  ? - done (please find attached prins screen). the problem it's still there. more than that , now the start page is black too ...

Perhaps I need to tweak somehow the code (?)

more options

Chosen Solution

You shouldn't place the code for the body in the userContent.css file as this will always use this background color. I only posted the links to those CSS files to show what rules are used by Firefox. So only leave the code for image.decoded in the file.

@media not print { img.decoded { background: none!important; } }

Normally you would use this extension or one of the others to get a more reliable code.

more options

and the winner is ... Old Default Image Style: https://addons.mozilla.org/firefox/addon/old-default-image-style/

FYI the other two suggestions addons doesen't work .

thank you all for your time and support I really appreciate it. ps: I've tried to copy/paste the above mentioned code into the userContent.css file but again, with no results.

Modified by mozilla_user78