Results 1 to 13 of 13
-
08-28-2009, 08:50 PM #1Web Hosting Master
- Join Date
- Jun 2002
- Posts
- 1,378
CSS issue with gradient background
I've run into this problem with a couple different site designs, and it seems to happen cross-browser.
Basically, I'm doing something like this:
Code:background: url('/images/background.png') repeat-x; background-color: #BFC1C4;
The problem I'm having is that there's a sharp line where the colors never match. The image is displayed spanning the width of the page, but when after 400px, the color is noticeably different. If I use the eyedropper in Photoshop, it claims the bottom of the gradient is #BFC1C4. I redesigned the gradient image so that the gradient would stop earlier, leaving a good 100 pixels that are all that color. And I still have the same problem -- #BFC1C4 in a Photoshop PNG does not match the #BFC1C4 background in Firefox or Safari.
What gives? Is this a CSS issue? A Photoshop issue? A PNG issue? It's driving me crazy because I've checked and re-checked that the colors are right, yet they don't show up that way.
-
08-28-2009, 09:53 PM #2Web Hosting Guru
- Join Date
- Mar 2009
- Location
- /home/ohio
- Posts
- 264
It could be a photoshop issue. Are you saving for web and selecting png-24?
If you are saving it as png-8 128 Dithered, it is a lower resolution with less colors.█ HostREA.com
█ kirk[@]hostrea.com
█ Shared / Reseller cPanel Web Hosting
█ WHMCS Templates -Ready to go instant downloads.
-
08-29-2009, 04:17 AM #3Aspiring Evangelist
- Join Date
- Jan 2008
- Posts
- 384
yes seems problem in image, can you show us site or attach image here.
-
08-29-2009, 06:54 AM #4Web Hosting Guru
- Join Date
- Aug 2002
- Location
- United Kingdom
- Posts
- 291
I'd also suggest that you are saving the image in a lower resolution which can distort colours in the PNG. Have you looked at creating a gif instead as they can be lowered in file size whilst keeping full quality and colours.
-
08-29-2009, 07:25 AM #5Web Hosting Guru
- Join Date
- Jun 2002
- Location
- New York
- Posts
- 288
Is there a test link to see this?
Software Devil
-
08-29-2009, 08:00 AM #6
-
08-29-2009, 08:57 AM #7Web Hosting Guru
- Join Date
- Aug 2002
- Location
- United Kingdom
- Posts
- 291
My original post meant to say jpeg, not gif. Thank you for drawing my attention to it.
Although as you've said above that it's impossible to get full colour in gif format - it is possible to achieve full 24-bit RGB colour if encoded to GIF89a standards.
It's just not as widely supported as the standard 1987 gif format from compuserve
-
08-29-2009, 11:07 AM #8Web Hosting Master
- Join Date
- Jun 2002
- Posts
- 1,378
Ah-ha! I was just doing a plain-vanilla save. KmacK's suggestion worked like a charm. (Can you tell I don't do design for a living? )
Thanks to all for the help!
-
08-29-2009, 02:25 PM #9Web Hosting Guru
- Join Date
- Aug 2002
- Location
- United Kingdom
- Posts
- 291
Glad to see you got it sorted bud
-
08-29-2009, 03:05 PM #10
http://en.wikipedia.org/wiki/Graphic...rchange_Format
GIF is palette based: although any palette selection can be one of millions of shades, the maximum number that can be used in a frame is 256.Your one stop shop for decentralization
-
08-30-2009, 07:57 AM #11Web Hosting Guru
- Join Date
- Aug 2002
- Location
- United Kingdom
- Posts
- 291
That's assuming the user requires more than 256 colours to make the gradient. The animation can be made of 2 single frames of the same gradient but either way can be achieved by 256 colours in each frame if the full palette is made available.
Needless to say, this is also going off topic as the user is using a png and I've corrected I originally recommended a jpg for the gradient
-
08-30-2009, 08:46 AM #12
Try it. It will almost undoubtedly look bad, as smooth gradients in GIF images just don't seem to work.
The animation can be made of 2 single frames of the same gradient but either way can be achieved by 256 colours in each frame if the full palette is made available.Your one stop shop for decentralization
-
08-30-2009, 08:50 AM #13Web Hosting Guru
- Join Date
- Aug 2002
- Location
- United Kingdom
- Posts
- 291
Similar Threads
-
Gradient Background Howto
By kau_ in forum Web Design and ContentReplies: 1Last Post: 09-11-2007, 06:28 PM -
Coding/Background Color Issue
By shotthebreeze in forum Web Design and ContentReplies: 0Last Post: 11-01-2006, 06:36 PM -
Photoshop: Is it possible to convert a white background into a transparent background
By Max Renn in forum Web Design and ContentReplies: 5Last Post: 10-22-2004, 08:59 AM -
Image background blend into web page background
By armin_van_buuren in forum Web Design and ContentReplies: 6Last Post: 10-15-2004, 11:19 AM -
In need of CSS/Gradient help!
By kmac21 in forum Web Design and ContentReplies: 11Last Post: 04-02-2004, 06:26 PM