How do I make a gradient resize when a page resizes? I put a gradient on the page but when I resize the page the gradient doesn't resize at all. It just disappears off the page. I created it in photoshop. The gradient is blue on the outside then a white strip in the middle.

2 answers

This was chosen as the best answer

Actually, background images don't resize, they just tile horizontally and/or vertically. You can, however, use something like:

background: -moz-linear-gradient(left, #00F, #FFF, #00F);

...but then you face browser compatibility issues. (theres a webkit version too, but I think it has different syntax). I personally think its a little early to start using this CSS property and in my opinion, the best solution is to rethink your site design.

Answered over 9 years ago by Matt Milburn
o.k.w 2355

A not-so-elegant method is to use an images stretched to the page or window size and z-index it to the back of everything else. I wouldn't recommend it though.

I would suggest using static background using a relative long/wide image that should cover the larger window sizes, and use a background color similar to the one at the end of the gradient as a fallback.

body {background: url(orange-red-vert-grad-image.jpg) repeat-x fixed red; }
/* //above uses a vertical orange top to red bottom gradient image using red as the fallback in case the browser window is much 'taller' than the image height */
Answered over 9 years ago by o.k.w