It's Movember. Movember is a yearly, world-wide fundraiser for research of men's health problems, such as prostate cancer and depression. Your donation will count, even if it's just $1. Click here to donate.
Use Bodhi Linux—It's awesome!

hasLayout.net

Share |

PNG Image and Background Color Mismatch

Affected Versions

This bug affects: IE8, IE7, IE6

Symptoms

Colors specified in CSS differ from the ones used in PNG images despite having the same color code

Date of the Tutorial

Sun Aug 9 07:07:46 2009

Description

You create a logo or some fancy-shmancy artwork and save it as a PNG image. You put it as background (or normal image) and surround it with the same freakin' color you used in the image, but alas, they turn out to be of a different shade in IE (I was told this also affects Safari on Mac, don't have one - can't test). Let's take a looksie:

Demo

Due to the nature of the bug, the demo is available on a separate page

HTML Code:
<div></div>
CSS Code:
div {
    width: 500px;
    height: 500px;
    background: #74822D url(pngcrush.png) no-repeat center;
}

The funny thing about this "bug" is that it's not really a bug :) It's a feature! What's even funnier is that I've seen people start looking for "web safe colors" and what not, thinking that they used "wrong" colors. Anyway, enough with the blabbering, let's get to solving this sucker.

Solutions

Below are solutions for the above bug ordered by the solution type.

Solution (Pseudo Bug)

Date of the Solution

Sun Aug 9 07:22:32 2009

Fixed Versions

All of the affected

Description

When I've said that this is a feature and not a bug, what I meant is that IE supports "PNG Gamma profiles". I've found a page that seems to talk about the topic: The Sad Story of PNG Gamma "Correction" by Henri Sivonen. The solution for our bug is simply removing those gamma profiles from your PNG images. Let's glance at the fixed demo:

Due to the nature of the bug, fixed demo is available on a separate page

HTML Code:
<div></div>
CSS Code:
div {
    width: 500px;
    height: 500px;
    background: #74822D url(pngcrush_fixed.png) no-repeat center;
}

Our code stayed the same. What I did is "fix" the image using pngcrush program. At this point I'd like to point out that you can configure your editor to NOT save those gamma profiles in the first place. The editor that's being naughty and saves them by default seems to be Photoshop; I'm a happy Gimp user and I don't have problems with my PNGs, this also means that I cannot give you info on how to configure Photoshop to not to save those profiles.

Anyhow, pngcrush can also reduce the size of your images, so why not give it a go. The command I've used to "fix" the demo image is: pngcrush -brute_force -rem gAMA -rem cHRM -rem sRGB -rem iCCP pngcrush.png pngcrush_fixed.png. The explanation of the program's arguments is beyond the scope of this document - as always, RTFM

On Ubuntu pngcrush is available from the Universe repos: sudo apt-get install pngcrush.

Comments

If you found materials on this site useful, please consider donating a few bucks to the author. Thank you.

Alternatively, purchase my books: