Basically, I love how people use textures in web design. But as most website designs are "fluid", how do you make them work for all monitors and make them seamless? For Example, on the website http://amazorize.com/ they have the "triangle" effect at the bottom of the main section, how would you go about making something like this seamless?

3 Answers
3

Patterns are made using tiny elements that join seamlessly when they repeat. Most site backgrounds are made in this way. The advantages are: a) you're just repeating a tiny image, so the page remains light, and b) the background automatically adapts to the browser window. This is really what Photoshop is doing when you fill a selection with a pattern: the same tiny image is repeated multiple times until the area is filled.

The Amazorize site uses the principle for the content background and the sawtooth edges (which repeat only on the x-axis -- "repeat-x" in CSS).

There are dozens of tutorials showing how to make a pattern in Photoshop. This one covers all the bases quite well, but if you Google "seamless pattern +Photoshop" you'll get pages and pages of them.

Take the single image from which the pattern is built, and use that as the background for any element that has a "background-image" property. In CSS, use repeat, repeat-x or repeat-y to create the pattern.

If you take a look at 4 you will see that the texture options are limited. Some textures you are allowed to move around, tile, center, etc. Others, you cannot. That is why I mention a nodal approach. Once you select a texture, that node (should) pull up ALL the features allowed to a JPG or PNG.