Results 1 to 13 of 13
  1. #1
    Join Date
    Jun 2002
    Posts
    1,376

    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;
    background.png is a gradient, starting with black at the top and ending in #BFC1C4. It's 400 pixels tall and 16 pixels wide. The goal is for it to "fade" to the background color so the top of the page is darker but fades into the non-image background.

    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.

  2. #2
    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.

  3. #3
    Join Date
    Jan 2008
    Posts
    384
    yes seems problem in image, can you show us site or attach image here.

  4. #4
    Join Date
    Aug 2002
    Location
    United Kingdom
    Posts
    290
    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.
    DesignBear.com
    View Portfolio

    A trusted WHT member for over 7 years!

  5. #5
    Join Date
    Jun 2002
    Location
    New York
    Posts
    287
    Is there a test link to see this?
    Software Devil

  6. #6
    Join Date
    Oct 2002
    Location
    State of Disbelief
    Posts
    22,957
    Quote Originally Posted by MediaFireBrand View Post
    Have you looked at creating a gif instead as they can be lowered in file size whilst keeping full quality and colours.
    Full colors in a GIF isn't possible. You're limited to 256 (at most), and gradients typically show "striations" and "choppiness" in gradients. You should use JPG for this instead, for smoother transitions.
    Having problems, or maybe questions about WHT? Head over to the help desk!

  7. #7
    Join Date
    Aug 2002
    Location
    United Kingdom
    Posts
    290
    Quote Originally Posted by bear View Post
    Quote Originally Posted by MediaFireBrand View Post
    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.
    Full colors in a GIF isn't possible. You're limited to 256 (at most), and gradients typically show "striations" and "choppiness" in gradients. You should use JPG for this instead, for smoother transitions.

    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
    DesignBear.com
    View Portfolio

    A trusted WHT member for over 7 years!

  8. #8
    Join Date
    Jun 2002
    Posts
    1,376
    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!

  9. #9
    Join Date
    Aug 2002
    Location
    United Kingdom
    Posts
    290
    Glad to see you got it sorted bud
    DesignBear.com
    View Portfolio

    A trusted WHT member for over 7 years!

  10. #10
    Join Date
    Oct 2002
    Location
    State of Disbelief
    Posts
    22,957
    Quote Originally Posted by MediaFireBrand View Post
    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.
    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.
    The only way to achieve more than 256 colors in a GIF is if it's an animation (GIF89a refers to animation), but only 256 at one time will display. Overall 24 bit, but not all at once. Gradients will still appear choppy/striated, as only 256 *per image* will show.
    Having problems, or maybe questions about WHT? Head over to the help desk!

  11. #11
    Join Date
    Aug 2002
    Location
    United Kingdom
    Posts
    290
    Quote Originally Posted by bear View Post
    The only way to achieve more than 256 colors in a GIF is if it's an animation (GIF89a refers to animation), but only 256 at one time will display. Overall 24 bit, but not all at once. Gradients will still appear choppy/striated, as only 256 *per image* will show.
    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
    DesignBear.com
    View Portfolio

    A trusted WHT member for over 7 years!

  12. #12
    Join Date
    Oct 2002
    Location
    State of Disbelief
    Posts
    22,957
    Quote Originally Posted by MediaFireBrand View Post
    That's assuming the user requires more than 256 colours to make the gradient.
    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.
    I don't believe you can have an animated background, but what point would there be to having a 2-frame animation of the exact same colors?
    Having problems, or maybe questions about WHT? Head over to the help desk!

  13. #13
    Join Date
    Aug 2002
    Location
    United Kingdom
    Posts
    290
    Quote Originally Posted by MediaFireBrand View Post
    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
    Glad to see the user got this resolved
    DesignBear.com
    View Portfolio

    A trusted WHT member for over 7 years!

Similar Threads

  1. Gradient Background Howto
    By kau_ in forum Web Design and Content
    Replies: 1
    Last Post: 09-11-2007, 06:28 PM
  2. Coding/Background Color Issue
    By shotthebreeze in forum Web Design and Content
    Replies: 0
    Last Post: 11-01-2006, 06:36 PM
  3. Replies: 5
    Last Post: 10-22-2004, 08:59 AM
  4. Image background blend into web page background
    By armin_van_buuren in forum Web Design and Content
    Replies: 6
    Last Post: 10-15-2004, 11:19 AM
  5. In need of CSS/Gradient help!
    By kmac21 in forum Web Design and Content
    Replies: 11
    Last Post: 04-02-2004, 06:26 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •