Fixed background image on iMac looks banded

It should be a gradual gradient

[zollerwagner]

On an iMac, with both IE5.0 and Netscape 7.0, I've got a background that is appearing banded. It looks like four or five solid horizontal stripes instead of a graceful gradient that appears everywhere else (on my PC browsers.

This is a background image on the body, that is fixed:

body{
position: relative;
background: #ffd url(/images/layout/bgimg.gif) bottom left fixed repeat-x;

I'm tending to assume that this banding is a glitch with the iMac. Does anyone know if that's right?

[tedster]

It could be - I can't say for sure because that's one kind of Mac we don't have here.

Have you created this gradient background gif with dithering? That usually eliminates visible banding on a wide variety of equipment. The handling of background images has been a bugaboo for many platforms.

[zollerwagner]

Thanks for the idea, Ted. I just tried it out. Unfortunately, it didn't work. Maybe this just isn't important enough to worry about, but it is odd.

Colors set to thousands or millions doesn't make any difference, either.

On NN, the banding looks more grey, and on IE it's got more color, but that's probably irrelevant.

[Noisehag]

Hi zollerwagner, how does it look if the image is saved as a jpg instead of a gif?

[zollerwagner]

Thanks for the idea.

Wow, that's interesting. In Mac IE5.0, it now looks pretty normal. Netscape still has bands, but I think there are a few more bands (6 now) and it looks a little more colorful, so it's not as bad looking.

Hmm. But I'm also seeing subtle banding effects in all browsers I've checked with on Netscape, Opera, and IE on a PC.

I used a 10 ("low") quality level to get the image down to 332 bytes, which is about the same as the gif was. Even taking it up to "high" quality, Netscape on PC still has banding. (Opera and IE look good.) So...this makes me wonder if this is simply a Netscape problem caused by its way of handling images.

[zollerwagner]

Noisehag, you've done it! Thanks. Your suggestion to check on color settings was a good one. For jpgs (low or max quality), the "thousands" setting has banding and the "millions" doesn't. When I tested this with gifs, the banding stayed in both color depth settings. I'll leave it as a jpg and consider it done.

I appreciate everyone's suggestions.

[Noisehag]

;)

Glad I could help friend.

[Noisehag]

When I tested this with gifs, the banding stayed in both color depth settings.

That is due to the gif compression when the gif was created, not the output of the end-user's browser. So now you are in the green whenever you create gradients...

[zollerwagner]

Ah, does that mean we should generally use jpgs for gradients, that gifs can't handle them as well?

[tedster]

Well, as your initial post points out, some browsers on some platforms do quite well.

The issue does involve the specific browser and operating system, as well as color depth and the graphics card. I've had good results with gif and jpg (though I haven't seen them on an iMac), but seen then blow up with older hardware as well as software.

If you have an image editor that generates lossy compression for gifs, or percentage settings for dithering, there's lots of possibility. Also, visible banding is also a bigger problem with some colors than others.

About color depth, the W3School Browser Statistics [w3schools.com] page shows 31% still coming in with 16 bit color. We still need to test our pages at 16 bit to avoid ugly surprises.

I believe I've noticed a design trend away from gradients recently -- possibly because of these problems, and maybe it's just a trendiness thing. The new look is more minimal and almost blog-like.

[zollerwagner]

Well, we're back to the "test and test again!" admonition.

That's an interesting observation about blogs influencing design in general. I think you're on to something.

Gradients and other things are being used again by some designers for simple shadow effects. It's sort of a "retro" look. Yeah, the Web's old enough to have a retro movement!

[pixelkat]

greetings, all!

iMac's are weird animals! you can have your site functioning perfect on every flavor of PC, Unix and Mac, but still have things mangled on an iMac!

in any event, there's an old trick we used to use for gradients back in the early days of the web when there were still a lot of people accessing the web in 256 colors.

In a photo editor like Photoshop, give the original gradient layer a bit of noise (about 5 percent or so) to break up the solid areas. it's hardly noticable in 16 or 32-bit color, and appears as a soft speckly gradient at lower color depth.

hope that helps!
kat