Gradient Filled Backgrounds

How?

[Kaspian]

I haven't seen it often, but I really like the look of a gradient fill for a background, not just a solid color or pattern. Anyone know how this is done, or know where I should start looking in order to learn it? I'd love to be able to have a deep, rich color in the background, the slowly changes to almost white near the top of the screen. Suggestions?

[tedster]

There's no special trick that I know of, just a long strip graphic of gradient color, such as you can make in Photoshop.

It would usually tile only vertically or horizontally. Gradient color shifts in both directions would take a pretty big file size -- so they're possible but not often very practical. I have seen it done, but watch out for readability of your text, since you can't predict what color the background will be for any particular word.

Gif is a better format than jpg, to avoid compression artifacts. To help keep the file size down, you can often reduce the original color palette a bit, depending on which colors you use.

[papabaer]

There is a filter option as well but it is IE 5.5 and up ONLY so unless your target audience consists of IE 5.5 and up users(up users?! ;)), you will leave the rest without a gradient.

The one thing that IS nice about the filter effect, is that it scales with your background and is extremely smooth in its gradient transitions.

[msdn.microsoft.com...]

[brotherhood of LAN]

I have tried using such a background before

Some things worth noting

1. Make the image width at least 1200 pixels in width, because youll need it to go the length of the page and some more to cover large res monitors
2. Keep the height of the gradients relatively small (about 20 pixels) to keep its quality but remain small

apart from that, same as above!

[IanKelley]

Using 100% width gradients doesn't make any sense if you want your site to look good for everyone... with 19-21' + monitors out there you'd have to make your images well over 1600 pix wide... if you do that you're going to lose a lot of your gradient at lower res and you're going to have an overly large k image.

It's better to use a fixed width gradient background. Make the image the bg for a centered table, for instance.

If it's a horizontal gradient it doesn't have to be any taller than 1px. You'll get really good compression on a straight 1 color gradient in both .gif and .jpeg.

[joshie76]

I've always founds JPGs a very efficient format for dealing with Gradients. Compression artefacts become problematic when you have high contrast areas, which shouldn't be a problem with gradients. Also you get the full 24-bit pallette for a smooth transition whereas you can only use a max of 256 colours in a GIF, which can lead to a very stepped appearance.

Take a 1600*1 (horizontal) or 1*1600 (vertical) black-white gradient image to be used as a background. Click here [hrmsoftware.com] to see how they measure up.

You'll see that the JPGs usually compare favourably to GIFs in terms of size and quality. The PNG-24 leads the way but there are compatibility problems with NN4 (I've heard rumours that NN4 will accept .png images if you make some modifications to the server, anybody know anything of this?).

(edited by: joshie76 at 3:13 pm (utc) on Feb. 14, 2002)

[joshie76]

Apologies, the dodgy file src's should be fixed now.