Creating Seamless Textures

Step 1

Find a photo online.

Step 1 Example

Step 2

Create new file and set canvas size 500px by 500px. Crop image and go to filter > other > offset and set the values half the canvas size. Next, you paint away the seams with the clone or patch brush.

Step 2 Example

Step 3

Increase the canvas size to 1000px and duplicate the pattern. Touch up repeating spots with the clone or patch brush.

Step 3 Example

Step 4 Example

Step 4

After touching up spots, increase canvas size to 1500px, duplicate your third tile and touch up repeating spots again.

Step 5 Example


And now you’re done. It’s up to you to do further editing. The quality of the photo I used was not that great. I would recommend using a higher res photo.

Add your seamless background in CSS

View Example on Codepen

Another example using seamless bg textures can be found on Big Shot Bobs Website

Step 6 Example