I have a 1 px width gradient background png that repeats in the y axis on my body element. I want it to end at the bottom of the page in the background color of the body element so it looks like it just continues. The problem is that the background color matches up fine on my computer, but when I test on other computers the color does not match.

Is this a color profile issue? Any ideas on the best way to fix?

4 answers

This was chosen as the best answer

Yes, I suspect it's a color profile issue. It may be that your PNG image has gamma information within it, which is causing browsers who observe that information to display it in a slightly different shade.

On OS X, I use an application called Gamma Slamma. This app does nothing more than strip out the gamma information from PNG files. Running it on your image may well solve the problem.

Note that Gamma Slamma doesn't have a user interface. To use it, just drag and drop your PNG file onto it. It'll create a new, processed, PNG file in the same directory.

(Apologies for the crappy download site link, the original author's site is no longer available, so you'll need to download the app from their mirror instead)

Answered about 10 years ago by Paul Farnell
  • Downloaded that Gamma Slamma app and it just crashes on startup. Miles Pomeroy about 10 years ago
  • Ah yes. I should have explained - there's no actual user interface to it! It doesn't run like a normal app. You don't actually launch it, you just drag+drop a PNG file onto it. It'll then create a new PNG file in the same directory that's been processed. Paul Farnell about 10 years ago
  • Yep, got it. And it looks like that worked! The only thing is that the colors for all the other elements look slightly off. I guess I should throw them through GammaSlamma to get rid of their color profiles too? Miles Pomeroy about 10 years ago
  • I'm glad it worked! Yes, I think that's best. I usually put all my PNGs through it just to be safe. Paul Farnell about 10 years ago
  • GammaSlamma.app uses pngcrush, a command-line utility you can get through MacPorts. Another way to accomplish what it does is to directly use: pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png Of course that only works for PNG files. But there is another utility you can use for JPGs which is part of the standard jpeg library: jpegtran -optimize -outfile out.jpg in.jpg Info found on from http://hacks.mozilla.org/2009/06/color-correction/. Hey thanks for all the help. Yeah for Doctype, this really works! Miles Pomeroy about 10 years ago
  • Except for formatting in the comments. :( Miles Pomeroy about 10 years ago
danwellman 5600

Also consider PNGOptimizer, which has a basic GUI, and in addition to stipping out the gamma information, it also tries to compress the file. Usually results in a 5-10% reduction in filesize and sometimes much more :D

Answered about 10 years ago by danwellman
  • That looks like the perfect choice if you're on Windows. Gamma Slamma is OS X-only, unfortunately. Paul Farnell about 10 years ago
  • Great advice, saved my life with the same problem but in IE today! (and saved about 40% of png-related traffic for the users :)) Thanks. Anton Maslo about 10 years ago

I would use a fade to transparent gradient with the softer color. Set the background color of the container to the final color and then apply the background image, something like this:

#container { background-color: #CCC; background-image: url(/path/to/image.png); }

That way the color shines through the transparent gradient and you don't have to worry about different browsers trying to apply color adjustments (or not doing it at all).

Answered about 10 years ago by Nathan DeGruchy
  • That's a nice solution. Just be aware that browsers not supporting alpha PNGs (such as Explorer prior to v7) wouldn't see the effect, and it could look a bit messy for them. Paul Farnell about 10 years ago
  • I'm guessing by "softer" you mean the lighter color, but I want the gradient to end in the darker color. Having a hard time conceptualizing how to implement your suggestion. Miles Pomeroy about 10 years ago
  • Yes, you would go from light to transparent in (in Photoshop, anyway), then the darker background-color shines through the transparent part, creating a similar effect. Unfortunately, as Paul pointed out, ugly things begin to happen on IE 6 and earlier because they don't properly support PNG transparency. Nathan DeGruchy about 10 years ago
  • I get it now, thanks. Miles Pomeroy about 10 years ago

I had a similar issue at one point last year. I was handed a Photoshop file from one of our Art Directors and began cutting it up to flow it into the site and I couldn't ever seem to get the colors to match up. Green turned to Blue and the likes. I finally realized it was a color profile issue and run the two most popular ones here on separate monitors. Sometimes just dragging the document to the other monitor before exporting can make a world of difference.

Answered about 10 years ago by jackkeller