1. Let’s start with a 200×200 pixel canvas. Drag out two guidelines, one at 100px vertically and one at 100px horizontally. Choose a color for the background and fill it in.

2. Choose the custom shape tool and pick the floral ornament 2 as seen highlighted in red below:

3. Create a new layer. Now hold down SHIFT and draw out the flower shape. Holding down SHIFT will keep the shape proportional.

4. Now I don’t like those 4 linear shapes so let’s get rid of them. You should be left with the following:

5. Now duplicate the flower pattern and then go to Edit > Transform > Rotate. Hold down SHIFT and rotate the object until you get the following:

Hit enter once the pattern is rotated into place as above.

6. Go to your Layers palette and select both the original and duplicate pattern layers. Right click and choose Merge Layers.

7. Go to View > Snap To > Guides and make sure it’s checked off. Now choose the Rectangular Marquee tool and select the top left corner. Right click the selection and choose Layer via copy.

8. Now choose the Move tool and move the piece to the bottom right corner.

9. One corner down, three to go! Go back to your Layers palette and make sure the original centered pattern is selected, not the piece you just moved.

10. Choose the Rectangular Marquee tool and select the bottom right corner. Right click the selection and choose Layer via copy.

11. Choose the Move tool and move the piece to the top left corner.

12. Are you noticing a pattern here?! Good, then continue with the last two corners. You should end up with the following:

13. Now let’s bring it all together. Select all the pieces including the original centered pattern. Right click and choose Merge Layers.

14. The pattern is a bit strong so let’s soften it. In your Layers palette lower the opacity to 25%.

You should end up with the following:

Now save your image and you’re ready to use it as a pattern on your website! If you would like to use CSS then include the following in your body tag, making sure the path to the image is correct:

background-image: url(images/background.gif);
background-repeat: repeat;

Enjoy!