Jump to content

Archived

This topic is now archived and is closed to further replies.

php_b34st

CSS gradient?

Recommended Posts

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.

Share this post


Link to post
Share on other sites
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]

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
[!--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

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.