Gradients repeat in 'Y' and stretch in 'X'

[TheAllusionist]

Quick question, I am wanting a gradient that repeats in the y (vertical direction) to adjust to the width of the viewers monitor resolution or width of the display. The gradient actually gradiates itself so I want it to fill up the tcat table instead of only how big wide the image is, I want it to stretch and shrink so to speak. I have tried the following:

#FFFFFF url(images/OrangeJuice/gradients/gradient_site.jpg) repeat-y top left; width: 100%

#FFFFFF url(images/OrangeJuice/gradients/gradient_site.jpg) repeat-y top left; stretch-x

#FFFFFF url(images/OrangeJuice/gradients/gradient_site.jpg) repeat-y top left; expand-x

But they do not seem to work, can it be done? I could go to one that fades to white and then it wouldn't matter I guess, but my tcat text is white and on some screens there is some text on the far right and it becomes invisible and I don't know where to change that, I think I would have to overwrite the defaults in some of the templates. I have been trying numerous versions, trying to find what works best and being able to contro the stretch factor would help a lot. Thanks in advance.

Russell

http://www.3dallusions.com/forums/

[TheAllusionist]

No guru's care to share the answer?

[Sean S]

I'm a bit confused with "gradient actually gradiates itself ", you mean your not using an image to create the gradient?

Also as for your question, I don't know of any way that this could be done using css alone, where the image size would automatically expand in lenght according to the size of the box. I could be wrong though.

[TheAllusionist]

Sean, thanks for trying to help out. I am using a horizontal linear image that repeats vertically. What I am trying to figure out is if there is a way to control it so that it stretches or shrinks in the horizontal direction to fill in the width of the users screen so that I can visually control the consistancy of the gradation in the horizontal direction.

basically the repeat-y in the code above works great for filling the tcat vertically, I am trying to figure out how to strech horizontally since that direction isn't repeating (Hmmm, I will have to check no-repeat to see if that will do it, but I think I tried that all ready). Perhaps you are right and it can't be done, I did want to ask just to make sure.

Thanks again!

Russell

[Sean S]

No problem at all Russell,

as far as I know, or the way I would do it would be exactly the same way you did it. I don't know of any way that you can expand the background image, there might be a way, but it will probably require some kind of javascript function I'm guessing.

Another problem is that if you find a way to do it, it will most likely act differently for different browsers so the best bet would be to either change your font color or do something about your background color.

--------------------------------------------------------------------------
small solution:

One little thing that you can do, is to set the alignment to "top right", that way you get more of the darker color at the left where your text starts, and set your background color to the darker color. So it would look like this for example,


#E77020 url(images/OrangeJuice/gradients/gradient_site.jpg) repeat-y top right;

--------------------------------------------------------------------------

hope that made sense :)

[TheAllusionist]

Makes perfect sense, just overlooked it with all the trial and error, which is unfortunately how I figure stuff out! LOL Thanks again for taking the time to lend a hand.

Best regards,

Russell

[Sean S]

lol I hear you, I do that a lot. Glad I could help out Russell :)