19

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, 2014 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, 2014 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, 2015 at 15:19
  • firefox has a nice addon to remove the transparent background. addons.mozilla.org/en-US/firefox/addon/…
    – phil294
    Apr 26, 2017 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, 2020 at 22:53

4 Answers 4

9

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

transparent example

This link does not work as of Dez2021, the developer can be found at https://tomekf.pl/

Similar extensions are:

7
  • 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, 2018 at 16:51
  • 1
    Does not work if I open the images from my local file system. Jun 10, 2019 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, 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
    This URL is no longer valid. Dec 11, 2021 at 23:37
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, 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?
    – Djidiouf
    Apr 26, 2017 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, 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.
    – Djidiouf
    Apr 28, 2017 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, 2019 at 2:34

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .