Custom Background Resizing As Needed

Question

Is it possible to make a square pattern gradient coloured background that resizes as a webpage grows downwards?

A square pattern, dark color - light color - dark color etc and as it goes up it gets ligther (gradient vertically) and, the important thing here, how to make the pattern increase as needed, because I don't know much about photoshop but as far as I know I have to choose the dimensions of a project 900x500(«height) however, the height grows as I add stuff to the div container... (the gradient would also have to redo or something)

Is this done in HTML/CSS or a photoshop setting? Or I have to make a big background and make it appear as user scrolls down?

Answer 1

If I understand your question properly, you could overlay two divs, one with your pattern and background-repeat: repeat; on the bottom and one with a flexible gradient from white to transparent on top. This gradient generator has helped me lots.

Answer 2

You could simply create an image and use the background-size CSS property.

More information on background-size here.

Basically it tells the image to scale to match the window size or scale to match whatever size you've declared.

Be aware you may need to use vendor prefixes to get things working correctly and this isn't supported in older web browsers.

It would be helpful to see a sample of the image you wish to use.