Effects with a Repeating Background

A repeating background, meaning one with the value repeat, repeat-x or repeat-y, is often used to create interesting decorative effects.

For example:

• Cross-stitching;
• Jagged edges;
• Gradients and shadows.

Yes, you can now create gradients and shadows using CSS. But sometimes, when the shadow or gradient is complex enough, it’s easier to use a semi-transparent PNG.

The most important thing when creating such effects is to choose an image that is designed to be repeated. It can be very small, and this will provide significant page size savings.

Let’s practice. For now, please just change the repeat mode after you add the background images. This will make it clearer.