Gradient in table background

[bxgirl]

thread215-1347419

I am attempting to apply a gradient to a table cell's background using css, with repeat-y property.

The gradient image repeat for the height of the table but not smoothly from top to bottom. It breaks after it reaches the height of the image. How can make this work so that no matter how far down the form extends, the gradient will look smooth.

I'm trying to do something similar to the form on this site:

http://www.artinstructionschools.com/ais/unique/97829.php?

Thanks in advanced.

 

[Vragabond]

You should make a 1px wide and whatever you want pixel high image of your gradient and repeat it on the x. That way different parts of the gradient will be seen depending on the size of the cell. In addition to that you add the background colour to the cell which is equivalent to the bottom most colour of the gradient. In this way, it will always look smooth.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

 

[grtammi]

Also, the form on that side is a fixed size @ 500px high, and chances are the background image used is also 500px high, and hence the smooth gradient.

Another technique you could use in conjunction with Vragabond's post is to set your gradient to fade in with a background color of the cell - this way, you'll still get a gradient effect in the cell, and if the cell is larger than your gradient image, it will simply blend in with the background color.

Greg

 

[bxgirl]

Thanks Greg. That is another option. In my search I found another way to accomplish this in the following link:

http://www.alistapart.com/articles/supereasyblendys