Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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 they have the "triangle" effect at the bottom of the main section, how would you go about making something like this seamless?

share|improve this question
up vote 6 down vote accepted

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.

share|improve this answer
Very helpful answer, thankyou very much! – Joshwaa Jun 17 '11 at 12:51
Do you have an email address I can contact you at? I may need further help, and you seem very experience in Patterns. – Joshwaa Jun 17 '11 at 13:04
You're entirely welcome. I'd rather keep discussions here, since answers are likely to be useful for other folks, too. – Alan Gilbertson Jun 17 '11 at 19:03
I understand. Thankyou anyway! – Joshwaa Jun 18 '11 at 11:31

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.

Web Design

share|improve this answer

as alan already defined everything so clear,you can create this kind of background in PS.

For creating seamless background i generally consider this filter of PS.

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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