gradient background

[maikey]

hi, i want to make a gradient background picture like the
one on the top of microsoft.com. does anyone know exactly
how this is done? i can make my gradient gif using
photoshop but i just want to know how big my original
graphic should be, should i use it as a background
picture in a table or just insert it? And how do I make
sure it covers 100% of the width of the page for
everyones browser.

thank you,
maikey

 

[Net55]

If it was a solid color background you could make it as
small as 1x1. But, since its a gradient the colors are
different horizontally (I'm assuming). Your vertical
colors probaly only differ every few pixels. So something
like 800x5 (width="800" height="5")would probaly due. You
may want to use a table background instead, for better
control of how the background is displayed. They best way
to see what works best for your site is to experiment.

 

[Chet]

hi, i want to make a gradient background picture like the
one on the top of microsoft.com. does anyone know exactly
how this is done? i can make my gradient gif using
photoshop but i just want to know how big my original
graphic should be, should i use it as a background
picture in a table or just insert it? And how do I make
sure it covers 100% of the width of the page for
everyones browser.

thank you,
maikey

maikey,

A simple trick for using a gradient as a background for a header
is to only have the gradient image repeat vertically and make the
background color the same as the right edge of the gradient
image.

That way if the person's browser is the same size or smaller than
the image, they'll see it correctly. If the browser is wider than
the image, they'll see the gradient image with a longer section
of the right color, but it'll still look OK.

Did I confuse you? I'm not really good at explaining it so I made
a quick sample showing a division and a table using a 480x10
image with a blue to white gradient. You can view it at

http://webpages.charter.net/rwtest/stuff/maikey/

hth