Jump to content


Photo

CSS gradient?


  • Please log in to reply
5 replies to this topic

#1 php_b34st

php_b34st
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts

Posted 04 March 2006 - 10:24 AM

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.

#2 AndyB

AndyB
  • Staff Alumni
  • Advanced Member
  • 5,465 posts
  • LocationToronto

Posted 04 March 2006 - 12:28 PM

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]
Legend has it that reading the manual never killed anyone.
My site

#3 doctor_james

doctor_james
  • Members
  • PipPipPip
  • Advanced Member
  • 40 posts

Posted 04 March 2006 - 01:01 PM

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

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

an example :
<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>

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

hope this helps.
Regards.

#4 php_b34st

php_b34st
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts

Posted 04 March 2006 - 07:08 PM

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.

#5 obsidian

obsidian
  • Staff Alumni
  • Advanced Member
  • 3,202 posts
  • LocationSeattle, WA

Posted 04 March 2006 - 07:25 PM

[!--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) View Post[/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)
body {
  background: url('images/bg.gif') #336699 repeat-x top left;
}

good luck
You can't win, you can't lose, you can't break even... you can't even get out of the game.

<?php
while (count($life->getQuestions()) > 0)
{   $life->study(); } ?>
  LINKS: PHP: Manual MySQL: Manual PostgreSQL: Manual (X)HTML: Validate It! CSS: A List Apart | IE bug fixes | Zen Garden | Validate It! JavaScript: Reference Cards RegEx: Everything RegEx

#6 php_b34st

php_b34st
  • Members
  • PipPipPip
  • Advanced Member
  • 168 posts

Posted 06 March 2006 - 10:44 PM

Ah, that makes a lot more sense thank you




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users