Using a left-right gradient effect for my background image...

Discussion in 'CSS' started by bad_bob00, Jun 22, 2007.

0
  1. #1
    Hi there,

    On my website I'm trying to create an affect so that the background fades from white to black (left to right). Whenever I view the site, the background appears as if it has been zoomed in by a large amount (you can clearly see each individual line of colours as the gradient changes). I have tried adjusting the width of the background image but this doesn't really help at all. Would really appreciate any help offered.

    Here is a screenshot of the problem...
    [​IMG]

    At the moment my image is 2000x5 pixels and it repeats on the y-axis.


    Thanks for any help offered.
    Matt
     
    bad_bob00, Jun 22, 2007 IP
  2. ninjamuk

    ninjamuk Peon

    Messages:
    305
    Likes Received:
    13
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I'd double-check the exported file. Sometimes with such large gradients it is easy to get separation between the colors if you don't bump up the quality high enough. Make sure you're exporting with a ton of colors and you're dithering it. Also, it only needs to be 1 pixel tall. That'll help bring down the file size.

    If you're image isn't pixelated before it enters the browser, I'd have to see the URL and HTML/CSS to see whats happening.
     
    ninjamuk, Jun 22, 2007 IP
    bad_bob00 likes this.
  3. danfinney

    danfinney Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Are you using a Jpeg or a Gif? You might try using a Gif and play with the dithering.
     
    danfinney, Jun 22, 2007 IP
    bad_bob00 likes this.
  4. bad_bob00

    bad_bob00 Active Member

    Messages:
    3,472
    Likes Received:
    56
    Best Answers:
    0
    Trophy Points:
    90
    #4
    :eek: Yep, this was the problem... I was convinced that the image was fine, obviously it wasn't though :(

    Thanks for the help, reps have been given :)

    Matt
     
    bad_bob00, Jun 23, 2007 IP
  5. danfinney

    danfinney Peon

    Messages:
    25
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Sometimes, even if your image looks good in your graphics-program-of-choice, the act of saving the file to Jpeg will generate some compression artifacts or color limitations that you don't see in your graphics-program. Gif images work better for gradients or solid color logos. Photos are the best place to use Jpeg format. Thanks for the rep points!
     
    danfinney, Jun 24, 2007 IP