Question

I’ve designed a website so that an image on the left seamlessly blends into the background color on the right without transparency (the color is simply matched on the far right border of the image to the background). The way the image is, it would be exceedingly difficult to make a cutout with transparency so this solution tends to work well (see the example to see why).

The far right of the image is the hex color #d0d9e0 according to Photoshop CS5, and I’ve written CSS appropriately

body {
    background-color:#d0d9e0;
    background-image:url('image.jpg');
    background-size:auto 100%;
    background-repeat:no-repeat;
}

In Webkit browsers (Chrome, Safari) the image blends in beautifully with the background and the result is great. In Gecko browsers (Firefox) and Trident browsers (IE) the color is rendered incorrectly either in the image or the background and it just looks amateur.

To illustrate this unique problem you can see the live test example here: http://ezrahub.com/missmaryland/

Try looking in different browsers to discover where my frustration’s coming from. Is there any way to fix this besides using image transparency (you can see why it’s frustrating here)? I know Gecko vs. Webkit render images differently but I can’t think of an excuse for straight-up color inaccuracy. AGHHHHHH

Answer 1

The difference is in how different browsers handle color-managed content. The Photoshop ICC profile included in your file is being interpreted differently (or ignored) in different browsers.

My guess is that you’re saving your bitmaps using File > Save As, and if you use File > Save for Web and Devices, you’ll get the results you expect.