Background Gradient And Matching Colors

[ocellnuri]

I've just redesigned my blog at blog.ocell.net. I haven't done web-dev in years, and I basically reverse engineered a Blogger template, learning CSS along the way.

 

I want a gradient background, so I made a one pixel wide image that starts white and ends blueish, repeating across the page. Then I tried to match the hex value for that final blue hue in the image with the background color set in the browser by my css file. It looks great in Firefox, but the colors don't match up in Safari or IE.

 

How can I choose a color that can be reproduced in my image, and reproduced by all Browsers?

 

Thanks in advance for any help!

[Striver]

I've just redesigned my blog at blog.ocell.net. I haven't done web-dev in years, and I basically reverse engineered a Blogger template, learning CSS along the way.

 

I want a gradient background, so I made a one pixel wide image that starts white and ends blueish, repeating across the page. Then I tried to match the hex value for that final blue hue in the image with the background color set in the browser by my css file. It looks great in Firefox, but the colors don't match up in Safari or IE.

 

How can I choose a color that can be reproduced in my image, and reproduced by all Browsers?

 

Thanks in advance for any help!

<{POST_SNAPBACK}>

 

try this...

 

http://www.verchi.com/tech/html/colorchart.htm

 

Lee

[woodygap]

This is a link that Don has shared in the past.

 

http://www.ficml.org/jemimap/style/color/wheel.html

 

All the Best,

 

Woody

[ocellnuri]

Thanks guys. What's the difference between "web-safe" and "web-smart"?

[Striver]

Thanks guys. What's the difference between "web-safe" and "web-smart"?

<{POST_SNAPBACK}>

 

web safe is the 216 color palet using jumps of 3: 00 33 66 99 CC

 

web smart uses a larger palet with jumps of 1: 11 22 33 44...

 

Lee

[ocellnuri]

Thanks.

 

Now it looks like my problem is my color settings in Photoshop... everything that's blue in Windows comes up Purple in OSX. I just made a colorsafe jpg in Windows, and it shows up purplish in safari but safari renders the web-smart color as blue.

 

I've really stepped in it.

[Striver]

Thanks.

 

Now it looks like my problem is my color settings in Photoshop... everything that's blue in Windows comes up Purple in OSX. I just made a colorsafe jpg in Windows, and it shows up purplish in safari but safari renders the web-smart color as blue.

 

I've really stepped in it.

<{POST_SNAPBACK}>

 

what version of PhotoShop are you using?

 

Lee

[ocellnuri]

I'm using Photoshop CS.

 

If you're still looking at the page at all, you'll see that I've tried to match grey, and I can't get that to work.

Edited April 16, 2005 by ocellnuri

[Striver]

I'm using Photoshop CS.

 

If you're still looking at the page at all, you'll see that I've tried to match grey, and I can't get that to work. 

<{POST_SNAPBACK}>

 

 

What is the version number? Before version 6, Photoshop wasn't quite geared to the web yet. You might take a look in the edit menu of photoshop under color settings and see what you have there

 

Lee

[ocellnuri]

Thanks! You hit the nail on the head. Under the Edit Menu I was able to to go into "Color Settings..." and set it to Web Graphics Defaults.

 

Thanks a ton! (CS is 8.0)

[Striver]

Thanks! You hit the nail on the head. Under the Edit Menu I was able to to go into "Color Settings..." and set it to Web Graphics Defaults.

 

Thanks a ton! (CS is 8.0)

<{POST_SNAPBACK}>

 

 

Great! Glad I could help

 

The layout looks nice

 

Lee

[ocellnuri]

Well the websafe #666666 still isn't working out in Safari...

 

It's too late for this now, but I think you've got me going down the right track. Thanks for the comment on the layout, I've learned a lot in the last day about CSS.

[ocellnuri]

Well I had decided it was too late to work on this, and I got in bed, and I had an idea... knowing I wouldn't be able to sleep until I tried it. And even better, it solved my problem! I'm posting it here in case anyone else goes crazy trying to do a gradient background that works across systems.

 

Instead of making a background image that fades from white to my target background color, I made an image that fades from white to transparent. I saved it as a PNG. Now I can change the background color in my style sheet without having to make a new image every time.

 

If this is a bad idea, please let me know. Thanks again for the help!

[owatagal]

I don't think Internet Explorer can render transparency in PNG files; I think they end up as solid colors. I could be wrong, but you might want to check.

[Deverill]

Consider your target audience. If a significant number of them have older browsers then PNGs may not be the way to go since the older browsers didn't consistently support them.

 

If most of them have the new browsers you shouldn't have a problem. You can check your AWStats to see what they are using.

 

Note: "significant" and "most" are for you to define based on your site type, purpose, audience, etc.

[ocellnuri]

Thanks for the tips everyone!