CSS Background color doesn't match JPEG color on Macs, looks fine on PC's

[evanmiller2007]

Hey Guys,
I've been dealing with this problem for a while now. Usually when I build a website with a gradient background, I make a tall-thin Jpeg/png of the gradient, going from say Red to Maroon. That goes along the top of the site, and then in dreamweaver or Photoshop I use to eye-dropper tool to get the hex-code of the color at the lowest point in the Jpeg, and set that as the background. this way the background image smoothly transitions from the image to the CSS background color.
The problem I'm having is that while it looks fine on my PC, when the other designers from my company look at the page on a their macs, there is a distinct difference between the color of the background jpg and the css background color.

I don't really know what to do about this. I could just make the background jpeg really tall, but that isn't optimal because some pages on a site might get really long. Another solution I thought of was to make the background a PNG, and have it gradate into transparent at the bottom. The problem with this is that a lot of times I use large images as backgrounds, and I need the jpg compression.

Any ideas on why this is happening, and how to fix it so that it looks correct on both Macs and PC's?

Here is a screenshot of what a site with the problem looks like on a mac:
http://preview.webworkscorp.com/absheatingcooling/Picture%205.png

here is a site that probable has the same problem (i haven't checked it on a mac but i'm sure it does:
http://www.3jelectric.com/


Any help would be great! thanks
Evan

[BLiZZaRD]

The simple answer is: you can't.

Reason: macs have a super high gamma output, comparable to a glossy LCD. Windows is more of a dullard, but presents more colors.

If you take your monitor on your PC and turn brightness up all the way, then adjust contrast to make the screen viewable, you will still not be close to the high output of a mac monitor.

Solution: web safe colors. Know that even a simple red like #FF0000, is going to appear different to almost everyone, not only mac and pc differences, but browsers, resolution and bright/contrast settings on a personal monitor. Using "web safe" colors make this variance less noticeable, but there will always be some difference.

What you can do is find a color that looks very similar on macs and pcs and use that as the bottom of your image and the background as well, or for the best practice: fade the image completely to white. #FFF; looks the most identical in all views.

[evanmiller2007]

Haha, yea, I was a little afraid that was the answer I was going to get. I'll start using web colors and hopefully that will close the gap enough.

Thanks for the quick & helpful response!

[djr33]

Mac and PC gamma problems are a big issue in several ways. One of those is for video production (another hobby of mine), and this means that movies are always darker on PCs when I put them on the web, among other things.

The simple answer I have for you is: don't mix CSS colors and images: just use an image (1px by 1px) with the same color as the faded color of the image and that will look consistent on any system (though not the same across systems).

Note that there is no way around this (such as your idea of using PNGs) because this is an issue of display settings, not html/css/jpeg/png/etc.

One thing to investigate is what colors ("web safe colors" perhaps) will be reasonably similar within a given environment, but you may find that none are close enough to what you need.

[e9gille]

I just had the same issue trying to build a simple website with a gradient background. It looks great on the pc, but on the mac there's a visible edge where the gradient image stops and the background takes over.

On the mac, I took a screenshot of the browser window, opened it in Photoshop and used the eye-dropper to find the rgb-values of both sides of the edge (png and background color). I compared these values to the ones found in the png file and the defined css background color with this result:



Screenshot
png-side: #0057d1
bg-side: #0066cc

png file
#0066cc

css file
#0066cc


For some reason the colors in the png are not the same in the browser as in photoshop. Changing the css to match the browser-interpreted png (#0057d1) gives a perfect result with a smooth transition on the mac, but shows up with an edge on the pc as the colors mismatch...

The question is why the browsers on mac (I tried Safari and Firefox) interpret image colors different to photoshop on the same machine. It's almost as if the browsers were compensating for the said gamma issue. I even tried saving the png as a bitmap to no avail.

I understand the issue of gamma output causing colors to look different on different machines, but surely one rgb color on the same machine but different applications should be the same?!

[BLiZZaRD]

Nope. It isn't and thats why you are having problems. There are very few colors that actually look the same cross OS, let alone cross browser and resolution.

There really isn't a fix to it, except to use a gradient that resolves into one of those few colors, like white, or black.

[adhawk media]

Make your jpeg image 5000 or 10,000 pixels high. In photoshop, you will find that saving it as a level 10 "highest quality" instead of 12 looks basically the same but the file size is going to be like 300kb, which loads very quickly on most people's computers. In your CSS stylesheet, make sure the bg color has the "no-repeat" value. By default, it should crop your image where content stops, i.e. where the last line of text for example is. If your content IS very long like you said, and exceeds the height of the image that you make, at least the color gradient discrepancy will be 5000px down the page instead of at the top, where it would be noticeable and rather unpleasant visually. This way, even if Macs and PC's process the color differently, at least you'll have consistency within the image, meaning if it looks slightly brighter on a Mac, then your entire background will just look slightly brighter, without that visible color mismatch line.

[Parradoxx]

Great information. I came here looking for an answer to the same problems. After reading the results of the posters on this thread, I wondered if it might not be a color-profile/color-management issue.

As a graphic designer, I use the color profile settings in Photoshop to render accurate color on screen through the final printed piece, but I've never given thought to color management on web pages. I have observed, however, that when saving TIFF files, for example, Photoshop gives me a choice in byte-order, so platform must have some impact, somehow.

I'm using Photoshop CS3 on my web-Mac. I opened my problematic thin-line background PNG, then chose EDIT->ASSIGN PROFILE, and selected "Don't color manage this object". I saved my PNG, uploaded it, and voila!... the line disappeared.

Good luck!