I am using a graphic with a red background for a banner that is the width of the page. I want to extend the red banner out the width of the viewport using a styled color which works fine and on my Windows computer using any browser, the colors are virtually identical. But when using a high end Mac, the red image is a noticeably different red than the graphic and displays a visible break line.
Is this to be expected, i.e. is it foolhardy to try to exact match a styled color with a graphic color across different platform/browser combinations? And if it is, should I use a 1 pixel wide image the same height as the banner and horizontally extend that out so they render the same color?
By styled color, do you mean a gradient or is it a solid color?
IF it is a solid color, do you have Photoshop? The reason why I ask, is because In PS you can do a 1x1 sampling (This in important! Photoshop and other paint programs have setting that sample the AVERAGE color in a particular AREA, but what you want is the EXACT COLOR or a particular PIXEL)…
Once you know that, then you can look at the hex code that PS gives you… #xxxxxx and use that instead of RGB…
By styled color, I was talking about creating a box and filling it with #xxxxxx in CSS. I sent your comments to the graphics guy, we’ll see. But the fact that it is working just fine in Windows and showing a marked difference on the Mac is what seems strange to me.
I’ve heard of this before, I think it’s to do with the different colour profiles used by different operating system, but I don’t know enough about graphics or Macs to tell you why it happens or if there’s anything you can do about it…
Using a tiled 1px image is a bad idea, and can make your site feel clunky and slow because of the extra processing needed by the browser.
A better solution, if your banner image is a GIF or PNG, and the red area is a solid colour, is to make the red transparent so that the only red you see is the red of the background colour, and then there won’t be any difference to notice.