16

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

5
  • What's the point of doing that?
    – gronostaj
    May 19 '14 at 0:48
  • 2
    You may need to give some more context or an example. The way I am reading it suggests that you are referring to pngs on websites, for which the background is determined by that page's CSS, not Chrome as a whole.
    – nerdwaller
    May 19 '14 at 0:56
  • 4
    I think he's asking about viewing an IMAGE not a PAGE. When viewing a transparent image by itself, that's not in a web page, chrome guesses a background color. latex.codecogs.com/png.latex?c=%5csqrt%7ba%5e2%2bb%5e2%7d Dark gray is not a good background for an image consisting of black and transparent pixels.
    – Bob Stein
    Aug 2 '15 at 15:19
  • firefox has a nice addon to remove the transparent background. addons.mozilla.org/en-US/firefox/addon/…
    – phil294
    Apr 26 '17 at 14:30
  • 1
    the most amusing thing on SO is getting the comments, asking What's the point of doing that?... eh.. three dots
    – T.Todua
    Mar 17 '20 at 22:53
9

You can install Image Transparency, a Chrome-Addon, to view a bright-Gray-chess-pattern:

transparent example

https://chrome.google.com/webstore/detail/image-transparency/ihnkmjaflangdaififmekbjicpafmdek

5
  • 1
    Please 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 '18 at 16:51
  • 1
    Does not work if I open the images from my local file system. Jun 10 '19 at 8:45
  • @MartinThoma for local files you might should use gimp[1] or something similar (not a browser) to open. [1] gimp.org/downloads Jun 10 '19 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 '19 at 15:43
  • @MartinThoma Maybe write an bugreport. I just found tomekf.pl/contact Jun 11 '19 at 7:31
3

You could also just open up the developer console (hotkey: F12) and use some JavaScript:

document.body.style.backgroundColor = "white";
0

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.

0

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.

5
  • unfortunately, this fills the entire background with checkerboard, even if the image is just very small.
    – phil294
    Apr 26 '17 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?
    – Djidiouf
    Apr 26 '17 at 23:16
  • 1
    the 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
    – phil294
    Apr 27 '17 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.
    – Djidiouf
    Apr 28 '17 at 1:25
  • This is good, but it doesn't change the background for images from the local filesystem or data URI.
    – lyomi
    Jul 20 '19 at 2:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.