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?

  • 1
    Could you give an example to the square pattern you are looking for? Oct 3, 2014 at 13:55

2 Answers 2


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.

  • Cool :oo imma see if it works out
    – Harlequin
    Feb 4, 2014 at 13:51
  • Also, "vote up requires 15 reputation" so no votes for you sir :[
    – Harlequin
    Feb 4, 2014 at 13:52

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.

  • I don't have one yet! (Although was conserning on how would I do it to resize and that if the div got bigger) But I'll look into your info. Thanks!
    – Harlequin
    Feb 4, 2014 at 18:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.