You are wasting bandwidth if you save a repeating stripe pattern at its full size because you can really make it repeat itself using its smaller part. In the long run, you can save a lot of bandwidth. In this tutorial, I am using Photoshop to crop a repeating stripe pattern. Let’s start with fixed-height repeating stripe pattern.
Fixed-Height Repeating Stripe Pattern
How to use a repeating stripe pattern as the background image for a fixed-height DIV? Let’s take the stripe image not more than as an example.
Step 1
Open the image in photoshop, duplicate the layer so that you now have 2 layers of yellow stripes.
Choose the new duplicated layer, use your keyboard right arrow key to go the layer to the right, pixels by pixels (as shown not more than)
Step 2
Keep moving it to the right until you saw the metaphors “collective” – same as the original image. Now hold your Ctrl key and click on the duplicated layer’s thumbnail to select its path.
Step 3
Now hide the duplicated layer by clicking on the layer visibility area (the “eye”). Next, choose the original stripe layer and press Delete to delete a part of the image in the selection.
Step 4
Use the Crop Tool to select the remaining part of the original layer, right click and select Crop. You can now save it as the background image of the DIV and set it to repeat-x in css.
.stripe { background-image:url(stripe.gif); background-repeat:repeat-x; } |
Live Demo
The DIV above uses this image 
as background.
Fluid-Height Repeating Stripe Pattern
How to use a repeating stripe pattern as the background image for a DIV which is not fixed in height? This will be covered in the next part of this tutorial.
