- Create a new document
- Select the Ellipse tool (U)
- Hold shift, and click+drag out your circle
- Select the Move Tool (V)
- Alt+shift drag the circle layer.
This will duplicate the layer, and keep it aligned while you drag it.
- Repeat step 5 as many times as you'd like.
- Select the Crop Tool (C)
- Select the bottom half (or upper half) of the circles, and press the enter/return key.
That should leave you with what you're looking for. Of course, feel free to delete the default white background and save it as a png/gif if you need transparency.
Now, if you want to use this type of pattern on the web, use a method similar as the above put only make ONE circle, crop it, and save it.
Then, as part of your code, use this:
This would of course make the background of that ID the half circles, looping the same image over the x-axis. This helps lower loading time as opposed to using a larger image.