CSS gradient?

[php_b34st]

Is there a way to create a gradient using css? I want a gradient to run from the top of my page to the bottom, because if i use an image it will repeat when the page gets longer.

[AndyB]

No. But the usual 'work around' for what you want to do is an image that's a gradient from something to the background colour of your page, and then use the CSS background property alternatives to prevent the background from tiling .... [a href=\"http://www.w3schools.com/css/pr_background-position.asp\" target=\"_blank\"]http://www.w3schools.com/css/pr_background-position.asp[/a]

[doctor_james]

there's a way to do it , but it only works in IE . here it is :

[code]style='FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff00ff,endColorStr=#00ff99);'[/code]
you can set start and end colors to any color u like .

an example :
[code]
<table border=0 cellpadding=0 cellspacing=0>

<tr><td style='FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ff00ff,endColorStr=#00ff99);'
>

you content here ....

</td></tr>

</table>[/code]

another way as AndyB said , is to set the background-repeat to : no-repeat to stop it from being tiled .

hope this helps.
Regards.

[php_b34st]

Thanks for your answers, as i want my site to work in more than one browser I will look into AndyB's suggestion but doctor_james' answer is usefull to know.

[obsidian]

[!--quoteo(post=351656:date=Mar 4 2006, 02:08 PM:name=php_b34st)--][div class=\'quotetop\']QUOTE(php_b34st @ Mar 4 2006, 02:08 PM) [snapback]351656[/snapback][/div][div class=\'quotemain\'][!--quotec--]
Thanks for your answers, as i want my site to work in more than one browser I will look into AndyB's suggestion but doctor_james' answer is usefull to know.
[/quote]

here's shorthand for what andyb is suggesting:

create an image between 1 and 5 pixels wide, but 400+ pixels tall with the gradient you're after. next, obtain the hex value for the bottom most pixel of your image (this will be the background-color of the page. next, if you have the image called "bg.gif" located in your "images/" folder, this simple CSS statement will set your background for you (replace your hex value for the #336699)
[code]
body {
  background: url('images/bg.gif') #336699 repeat-x top left;
}
[/code]

good luck

[php_b34st]

Ah, that makes a lot more sense thank you