Gradient Banding Issue RRS feed

  • Question

  • I have a gradient fill in Expression Design 2.  I used the slice tool to create a 1 px wide by 768 px high .jpg image and export it to be used as a background image in a web page that I'm creating.  ICC Profile and Antialias are checked.

    I created this CSS to put the gradient image as the background of the web page.   The end result is I see the gradient fill the page in IE8, but there's a lot of banding or unwanted color divisions as the gradient transitions from one color to the other.   Is there anyway to clean this up or prevent this problem?

    body {  background: #ffffff url(../img/gradient_background.jpg) repeat-x; }

    Monday, August 31, 2009 2:55 AM

All replies

  • Hello iforsyth,

    It might be helpful if you posted a screenshot of what you are seeing. I took the liberty of creating a JPG of the same dimensions you did, 1 px X 768 px and added it to a web page background. I didn't see any odd banding happening. Answering the following questions might also help:

    1. Are you using a simple two-color gradient - like black > white?
    2. Is the gradient (not the line) running vertically or horizontally?
    3. When you previewed the web page in IE8, at what resolution did you preview - 800x600, 1024x768...etc. ?

    If you're having difficulty posting a screenshot here you can also email me at


    Will Buffington
    Microsoft Expression Support
    Monday, August 31, 2009 10:59 PM
  • It looks as if background repeat might be a factor.

    Posting a screen capture of the observed effect seems a good idea.
    Tuesday, September 1, 2009 12:32 PM