Повторяющийся фон, тот у которого repeat, repeat-x или repeat-y, часто используется для создания интересных декоративных эффектов.

Например:

• стежки;
• зазубренные края;
• градиенты и тени.

Да, сейчас уже градиенты и тени можно делать с помощью CSS. Но иногда, когда тень или градиент достаточно сложные, проще использовать полупрозрачный PNG.

Самое главное при создании таких эффектов — выбрать картинку с нужным периодом. Она может быть очень маленькой и даст существенную экономию веса страницы.

Попрактикуемся. Только, пожалуйста, изменяйте режим повторения после того, как пропишете фоновые изображения. Так будет нагляднее.