Question posted in 
<——This is an image I made in Photoshop…
It’s basically a 160 x 160 box of white with a texture applied.
Below is what it looks like with “background-repeat” in the CSS. I was hoping it’d balance out. Is there a certain percentage the textile has to be at, or size of the original box? For it to be a perfect repeatable texture?
Im trying to do this myself, since I cant find grid patterns that fit the style.
Question: Whats the trick on making textures in Photoshop, that appear as balanced whole backgrounds when repeated?
If you look at the below image where it’s in effect, on the very basic start of what Im working on, you can notice it doesnt quite fit together.
Any and all help greatly appreciated. Thanks in advance.
2
Answers
Look in the top left corner of your image. You’ll note that the dark line starts at roughly 4-5 pixels from the top. Then look at the top right corner, and you’ll note that the top line starts at just perhaps 2px from the top.
When this image is repeated twice side by side, there will be a disconnect. Just crop the image and shave off the two or three pixels until your lines connect. Repeat by cropping the bottom of the image for vertical alignment.
If you want to do this experimentally, increase the size of your canvas, and copy the pattern into a new 160×160 layer. Place them side by side, and then move the layers one pixel at a time so that they overlap. Where the overlap aligns is where you should crop the image.
If you want that background for a webpage is better the use of repeating-linear-gradient. It is very easy of implement, less assets to download and it is supported by major browsers.