I’m sure i’m not the first to come across this issue but it had me confused for a little while! The background image on my music blog was not fading correctly into the background colour of the site. This issue only seemed to occur on Firefox (and not every Firefox either…).

The explanation is here! According to Firefox’s documentation, it appears there is a “color management” feature which renders these images differently. For some reason this has been set to be the default option from Firefox 3.5. So on Firefox, my background image and the background colour were not matching up.

To change this setting back in Firefox:

1. Type in about:config into the address bar
2. Find “gfx.color_management.mode”
3. Change the value from 2 to 0.
4. Restart Firefox

Before:

After:

How do I fix images so that they display correctly in Firefox 3.5+?

It looks like it might be a PNG issue in Firefox. After a bit of Googling, I came across the following steps:

1. Download TweakPNG from here: http://entropymine.com/jason/tweakpng/
2. Run it and open your image
3. Delete the lines which start with gAMA, cHRM, iCCP and sRGB (these seem to be the chunks of colour profiles which mess up in Firefox)
4. Save and replace your image on your site.