Question

I am using an image as the background for my site. It has a black/white gradient, and is 1px wide.

The CSS:

background-image:url('../image/gradient.png');

which makes it repeat itself. The height of the image is 2000px.

Is it possible to change the height of the image dynamically, so it fits all page sizes: If the height of a page is less than 2000px, the height of the image should be smaller, if the height of the page is bigger, the image should be bigger.

Thanks in advance

I have tried various in-browser gradient techniques, and they dont seem to work the same on all browsers.

Answer 1

Maybe am not getting the right context of your question, but this can be do it easily with somethin like

#SomeImg.src {
width: 100%;
position: absolute;
top: 0;
left: 0;
}

Resize this page to see it action: http://css-tricks.com/examples/ImageToBackgroundImage/