6

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

Firefox

Chrome

enter image description here

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.

Boris Smus
  • 8,220
  • 2
  • 36
  • 33
John Magnolia
  • 16,769
  • 36
  • 159
  • 270
  • 1
    My Firefox is displaying it like your Chrome screenshot - background color changed. __EDIT:__ Upon copying the two into photoshop, it displays similarly. __EDIT 2:__ Interesting.. It only does so after copying directly from firefox. If I download the image, and then copy it, it has the same background color... – Nightfirecat Sep 26 '11 at 09:50

4 Answers4

12

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.

graphicdivine
  • 10,937
  • 7
  • 33
  • 59
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).

Nightfirecat
  • 11,432
  • 6
  • 35
  • 51
0

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.

Community
  • 1
  • 1
Janis Lankovskis
  • 1,042
  • 9
  • 9
0

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.

petermolnar
  • 1,626
  • 14
  • 23