You are wasting bandwidth if you save a repeating stripe pattern at its full size because you can actually 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 below 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 move the layer to the right, pixels by pixels (as shown below)

Step 2
Keep moving it to the right until you saw the images “combined” – 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.