Background image color changes firefox/chrome

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/开发者_StackOverflow中文版forks, its the background color of this image which changes.

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.

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).

this is something to do with colorprofiles.

this might help - Image color differences in different browsers. (Firefox, Chrome, IE)

and this

http://code.google.com/p/chromium/issues/detail?id=143

check your colorprofiles in photoshop (cmd+shift+k) and try to recreate the image. should work.

If you change the image to be png it will be the same color. The reason is in the link of @Nightfirecat and in @graphicdivine 's answer.