По умолчанию изображение будет повторяться, пока не заполнит все доступное пространство по горизонтали и по вертикали. Однако его поведением можно управлять с помощью свойства background-repeat.

Решение
Результат использования изображения с рис. 3.4 со значением no-repeat свойства background-repeat.

 Рис. 3.4. Заполнение фона страницы с помощью достаточно широкого изображения; свойству background-repeat присвоено свойство no-repeat

 
Высота изображения составляет лишь 400 пикселов, что гораздо меньше высоты типичной веб-страницы, поэтому ее фону был задан тот же цвет, что и у последнего ряда пикселов градиентного изображения. Таким образом происходит плавный переход от изображения к фону страницы.

Такого эффекта можно добиться и более эффективным способом, состоящим в использовании меньшего по размеру изображения, которое быстрее загружается. Для этого нужно отрезать от нашего градиентного изображения тонкую полосу, как показано на рис. 3.5.

Рис. 3.5. Отрезанная полоса градиентного изображения

Задав свойству background-repeat для созданного изображения значение repeat-x, получим такой же результат, что и в первом примере, используя при этом файл гораздо меньшего размера. Чтобы обеспечить сплошное покрытие отображаемой в браузере страницы градиентом, укажем в качестве ее фона цвет, совпадающий с нижней частью градиента.

Если бы градиентный переход осуществлялся не сверху вниз, а справа налево, для создания фоновой заливки можно было бы воспользоваться тем же методом, повернув эффект на 90 градусов. Взяв в качестве фонового изображения горизонтальную полосу и указав свойству background-repeat значение repeat-y, мы обеспечиваем повторение градиента сверху вниз, как показано на рис. 3.6.

 Рис. 3.6. Градиентное изображение со значением repeat-y свойства background-repeat (demo)