Images displaying differently in Safari

[gfxhelp.com]

I have a background image which has a gradient and then ends on the color #444444. The background color is #444444 so it blends perfectly. It works in IE6/7/8, FF 2/3, Chrome, etc etc, but when viewing the site in Safari on a mac it has color issues. With Safari on windows it works fine, it's only on a mac.

Anyways, attached is a screenshot of what's happening, it shows a FF and Safari next to each other. Is anyone familiar with this issue and have you found a solution? If you have Safari on a mac and want to see what I mean, my site is http://www.GFX-Help.com .

[gfxhelp.com]

Sorry, forgot the firefox ss...

[Lynne]

For your container, you should have both a background color and a background-image. Look at the css that vb uses for tcat. Notice how there is an image and a color:

.tcat
{
    background: #869BBF url(../../images/cstyle/blue/tcat.jpg) repeat-x top left;
    color: #FFFFFF;
    font: bold 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
}

There is both a background color and an image. Try putting your color in the container also.

.container {background-attachment:fixed;background-image:url(images/bblast/header/bg_top.jpg);
background-position:center top;background-repeat:no-repeat;
background-color: #444444
margin:0;padding:0;}

[gfxhelp.com]

it's an issue of safari rendering the images different than other browsers, the container has no bg color and falls back to the background color specified in the body css. Have a look at www.gfx-help.com/test.html this is a simplified test. I believe the issues is related to the way Safari handles color profiles, but I don't know how to fix it.

[Lynne]

Wow, that is bizarre. I never realized that happened!

The only thing I can think of is to make the bg.jpg image just as wide as the by_top.jpg image - you would make it wider by adding in more of the correct background color. (Did that make sense?)