Is there any fix to show transparent png background instead of black ?
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.
- Transparent standalone images: https://addons.mozilla.org/firefox/addon/transparent-standalone-imag/
- Old Default Image Style: https://addons.mozilla.org/firefox/addon/old-default-image-style/
- Custom Standalone Image Backgrounds: https://addons.mozilla.org/firefox/addon/custom-image-backgrounds/
All Replies (8)
hello, you could try to put the following code into the userChrome.css file...
@media not print {
img.decoded { background: none!important; }
}
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:
- Help > Troubleshooting Information > Profile Directory: Show Folder (Linux: Open Directory; Mac: Show in Finder)
- http://kb.mozillazine.org/Profile_folder_-_Firefox
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
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
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 (?)
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.
- Transparent standalone images: https://addons.mozilla.org/firefox/addon/transparent-standalone-imag/
- Old Default Image Style: https://addons.mozilla.org/firefox/addon/old-default-image-style/
- Custom Standalone Image Backgrounds: https://addons.mozilla.org/firefox/addon/custom-image-backgrounds/
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
You're welcome.