How do you change the transparent image background color in chrome? For example if I have a png with a transparent section I want to change that transparent section's color to red instead of white. Or even better a checkerboard like photoshop
4 Answers
You can install Image Transparency, a Chrome-Addon, to view a bright-Gray-chess-pattern:
This link does not work as of Dez2021, the developer can be found at https://tomekf.pl/
Similar extensions are:
-
1Please do not post the same answer to multiple questions. If the same information really answers both questions, then one question (usually the newer one) should be closed as a duplicate of the other. You can indicate this by voting to close it as a duplicate or, if you don't have enough reputation for that, raise a flag to indicate that it's a duplicate. Otherwise tailor your answer to this question and don't just paste the same answer in multiple places.– DavidPostill ♦Apr 1, 2018 at 16:51
-
1
-
@MartinThoma for local files you might should use gimp[1] or something similar (not a browser) to open. [1] gimp.org/downloads Jun 10, 2019 at 15:35
-
I know that I could do it in Eye of Mate (Gimp is a really bad option to just view an image). But I don't want. I could also download an image and open it in an image viewer. But this question is about Chrome. Jun 10, 2019 at 15:43
-
1
You could also just open up the developer console (hotkey: F12) and use some JavaScript:
document.body.style.backgroundColor = "white";
If you're doing something with HTML then this is the way to go:
<img src="image.png" style="background:red>"
If you want to use another image as background then you use this CSS property instead:
background:url(http://image.png)
Good luck.
There is a chrome extension which allow you to change the behavior of chrome when you open an image: Image to center.
In addition to center the image in the browser instead of having it in the top-left corner, you will be able to select a solid background color of your choice or a checkerboard one like on Photoshop.
It's very useful when you are looking for a well aliased picture as there is a lot of png file with some transparency but which render well only on a white background. So you just lose the interest of having transparency and that kind of pictures are still displayed in the google result with alpha filter.
-
unfortunately, this fills the entire background with checkerboard, even if the image is just very small.– phil294Apr 26, 2017 at 14:31
-
@Blauhirn how is it a problem for you? Do you have a use case where this behavior can be disruptive in any way?– DjidioufApr 26, 2017 at 23:16
-
1the problem is, you cannot see the image dimensions. the background spans over the entire screen. this arrow, for example. with the given extension, you cannot see it's got a width of >900 px. This is complaining on a rather high level, I admit. But so is OP question :p– phil294Apr 27, 2017 at 16:14
-
@Blauhirn you're right, the possibility to display a border or something would have been a nice addition. I get that you meant you can't approximate the dimensions however, when an image is opened in its own window, they are defined in the title of the tab: arrow-small-left.png (1200x600). Still I concede it's not a visual indicator of how big the image can be.– DjidioufApr 28, 2017 at 1:25
-
This is good, but it doesn't change the background for images from the local filesystem or data URI.– lyomiJul 20, 2019 at 2:34
pngs
on websites, for which the background is determined by that page'sCSS
, not Chrome as a whole.What's the point of doing that?
... eh.. three dots