Gradient Question

[twilitegxa]

I have a gradient being used on a sidebar on a website, but I need to to somehow stretch the length of the page. Is it possible to create a larger image of the gradient and resize it to fit the size of the rest of the content? Here is the website link:

 

 

http://webdesignsbyliz.com/s2design/

 

 

Can anyone advise me on the best way to do this?

[cssfreakie]

there are multiple ways to do this, and it depends a bit on your gradient. (i am not sure if there is a best way)

Right now you are using a linear gradient that end in the bottom with a color of : #CCCCCB

so in case you want that particular dive to strech out to the bottom of the page, you could add a background color to it of #CCCCCB

 

What you could also do is set an image as content (in your html to 100% and maybe even a position fixed on it.

 

But in the end it depends on your design, Is the footer at the bottom clearing all above and beneath it or is it a small footer sitting at the right so the left div can reach to the bottom. those are 2 different situations.

 

but something you can already improve is the width of that image. you could make it 1px width and set repeat-x on it

[mat3000000]

instead of using an image for the gradient, use pure CSS

.sidebar{

background: #A3364C;       /* for old browsers */
background: -webkit-gradient(linear, left top, left bottom, from(#------), to(#------));      /* for webkit browsers */
background: -moz-linear-gradient(top,  #------,  #------);       /* for firefox 3.6+ */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#------', endColorstr='#------');   /* for IE  */

}