Повторение фоновой картинки в широких окнах

В узком окне сайт смотрится нормально:

Страница в узком окне

Фон страниц на нём образован при помощи фоновой “плиточки”:

Фоновая плиточка

У разработчика небольшой монитор и он даже не подозревает, что на экранах с высоким разрешением с сайтом происходит катастрофа:

Страница в широком окне

Что произошло? Ширина окна превысила ширину фоновой плиточки и браузер стал повторять её по горизонтали.

Избежать подобной неприятности можно двумя путями.

Первый способ рекомендует конструировать плиточку, ширина которой превосходит разумную ширину окна пользователя. Но возникают проблемы с определением этой самой “разумной” ширины. Не так давно трудно было себе представить экраны с шириной большей 1280 пикселов. Сейчас никого не удивишь монитором с горизонтальным разрешением 1600 пикселов.

Второй способ не зависит от разрешения экрана. Он будет работать в окнах любого размера. Суть его в том, чтобы разрешить браузеру повторять фоновую плиточку только по вертикали, а по горизонтали запретить.

Такое указание можно задать при помощи CSS-свойства background:

<BODY style="background: repeat-y url(pic/fon.gif)"
      bgcolor=#fbeee7 text=black
      link=blue alink=red vlink=purple>

Значение repeat-y разрешает повторение фоновой картинки fon.gif, только по вертикали, а атрибут bgcolor задаёт цвет справа от плиточки.

Теперь в качестве фоновой картинки можно использовать совсем короткое изображение:

Короткая фоновая плиточка

Высоту такой фоновой картинки нужно делать, конечно, в один пиксел. На иллюстрации плиточка показана высокой для наглядности.