Effects with repeating backgrounds

A repeating background is often used to create interesting decorative effects. For example, it can be used to make:

• stitches;
• jagged edges;
• gradients and shadows.

Yes, gradients and shadows can be done with CSS. But for complex shadows or gradients it is easier to use a semi-transparent PNG.

The most important thing when creating such effects is to choose a picture with the right period. It can be very small and will give a significant saving of page weight.

Let's practice. Please, change the repetition mode after you set the background images. It'll be clearer that way.