Background image color changes firefox/chrome

Question

I have a very strange from when testing a website on Chrome.

The CSS is exactly the same but appears different. Plus tested on the same monitor.

Firefox

Chrome

You can see from the Chrome print screen the background image I am using for the knives/forks, its the background color of this image which changes.

Answer 1

The background image at http://www.cater-shawrecruitment.co.uk/webapp/templates/default/images/bgpage.jpg has an embedded colour profile, which different browsers will interpret differently. You'll need to re-render the image without the embedded colour profile.

This is probably caused by using photoshop to simply 'Save' the JPG, rather than 'Save for web'ing.

Answer 2

Chances are, your image has a color profile applied, and thus is being rendered differently in Chrome and Firefox, which only the former of these two will actually respect it. Reading off of Chris Coiyer's article on web color profiles, you can fix the problem by doing as follows:

If you "Save As..." from the file menu, you will have the opportunity to save your color profile along with the image. If you "Save for Web & Devices..." the "sRGB" (best for the web) color profile will be automatically applied (in CS3 anyway).