I am frequently working to create background textures in Photoshop to be used on the web. Unfortunately I usually have to guess, or just use freebies from other websites.

I would like to build my own textures in Photoshop and check if they tile properly before exporting the image. Is there a way to do this quickly? I remember a method using offset, but I'm not familiar with the tools.

Below are a couple example background tiles so you can see what I'm talking about:



  • create your image. For example, let's say it's 200px square
  • go to FILTERS > OTHER > OFFSET and type in x and y numbers that are half your image size (in this case 100px)
  • this will shift your image over that many pixels and put the pixels that were moved off the canvas on to the other side. You now will see a seam running down the middle of your image where the pattern doesn't quite repeat fully.
  • touch up this seam to make it a smooth blend using whichever tools you like (clone tool is a common option).
  • save your new image.

For more complex images, you may need to do a final offset of say 1/4 the pixel dimensions to touch up the edges you might have missed the first time that fell near the edge of the canvas.

  • Thank you this is perfect! Exactly what I was looking for – Destiny Islands Apr 18 '12 at 16:21

DA01 answers how to make it but your question is how to test it. The answer to that question is:

  1. Select your pattern layer
  2. Edit > Define Pattern
  3. Create New Layer
  4. Select All
  5. Edit > Fill > Pattern > Choose your pattern
  6. Hit okay and see if it looks good
  • 2
    ugh. I totally misread the question! Good tip. Another option is to simply make a test HTML file with a repeating background. Then just keep re-saving the file and reloading the browser. – DA01 Apr 18 '12 at 16:29
  • 1
    Yes I knew how to do it in HTML/CSS but wasn't aware that Photoshop could test as well. Thanks for the advice! – Destiny Islands Mar 23 '13 at 17:26

I traditionally save the image as a jpg or png and then use basic html to test the tiling.

<body style="background: url(image.jpg) repeat 0 0;">

Open that in a browser and you can see the tiling and simply re-save "image.jpg" and refresh the web page to check revisions.


There is also another way to do this, but the limit is that all the other patterns must be of the same size you will see why.


  • Make a 200px by 200px box.
  • Convert it into an smart object.
  • Duplicate and align it so there are 3 boxes horizontally. Make sure no overlapping or spaces in between.
  • Duplicate the three boxes selected into 3 vertical columns.
  • If not already enabled, enable floating windows in Preference.
  • Double click and open the smart object.
  • Align both windows as so that you can see both files.
  • Fill the smart object with whatever pattern you want and see it in action in other window simultaneously.

There's a great (freeware for personal use) tool called AMP Tile Viewer that lets you very quickly check whether an image is tileable and how it will look tiled. I use it all the time and it works just great. No need to make patterns in Photoshop you will never use or have to delete afterwards.


I wrote a Chrome extension called Tile View that lets you right click an image and see how it tiles.


The way I do it is just save the tile as a jpg and set it to tile on my desktop. Pretty quick and easy.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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