Mobile app version of vmapp.org
Login or Join
Cofer715

: Custom Background Resizing As Needed 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

@Cofer715

Posted in: #AdobePhotoshop #Background #Gradient #Resize

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Cofer715

2 Comments

Sorted by latest first Latest Oldest Best

 

@Nimeshi706

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.

10% popularity Vote Up Vote Down


 

@Megan533

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.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme