Jump to content

CSS gradient?


php_b34st

Recommended Posts

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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

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.