Часто при создании сайта вебмастера и дизайнеры практически не уделяют внимания такому элементу, как фон страниц, хотя он может играть довольно значимую роль. К примеру, при грамотном сочетании фона и содержимого основной области страницы можно достичь улучшения юзабилити (у пользователей будут меньше уставать глаза при просмотре и чтении статей, они будут лучше воспринимать информацию). Кроме того, фон может каким-то образом отражать / подчеркивать тематику сайта или бренд фирмы (в том случае, если сайт является корпоративным).
Чаще всего используют один из трех видов фонов – CSS-заливка (одним цветом или градиентом), мозаика (повторяющиеся по горизонтали и / или вертикали небольшие симметричные изображения) и фон в виде одной большой картинки.
На последнем типе фона мы остановимся чуть более подробно. Как правило, такое изображение занимает всю видимую часть страницы, поэтому оно должно подбираться с учетом всех возможных разрешений мониторов. В этом и кроется главная проблема. Посудите сами — если изображение будет недостаточно большим по ширине, то при просмотре сайта с мониторов высокого разрешения оно не сможет заполнить все видимое пространство (в правой и левой частях страницы останутся пустые полосы, которые наверняка будут портить всю дизайнерскую задумку). Если изображение окажется недостаточно большим по высоте, то останется пустое пространство в нижней части страницы.
Обратная ситуация — фоновая картинка обладает очень большим разрешением и полностью закрывает страницу даже при просмотре сайта с самых современных мониторов. В этом случае возникает другая проблема – отсутствие симметричности и целостности изображения при просмотре страниц с мониторов среднего и низкого разрешения (на них будет видна только небольшая боковая часть изображения). Кроме того, слишком большое изображение наверняка будет долго загружаться в браузере, особенно при низкой скорости интернета пользователя. Для примера возьмем качественное фото разрешением несколько тысяч пикселей в ширину и высоту (размер может составлять от 2 до 5-6 и более мегабайт). Подобная фотография, выставленная в качестве фона, может грузиться больше 10 секунд. А это достаточно много.
Один из главных недостатков фона в виде большого изображения является его некорректный показ на мониторах мобильных устройств. Дело в том, что компьютерные мониторы обладают альбомной ориентацией (ширина больше высоты), а мониторы смартфонов – книжной (высота больше ширины). Изображение изначально подбирается под альбомную ориентацию и на мониторах мобильных устройств оно будет оставлять очень много свободного пространства в нижней части страницы, что опять же приведет к ухудшению дизайна.
Что касается преимуществ подобного фона, то оно лишь одно — способность максимально выразительно отразить тематику ресурса и сформировать уникальный образ сайта в глазах посетителей. На большой картинке можно отобразить абсолютно все, что угодно – любые предметы, явления и т.д. В некоторых случаях данное преимущество является настолько значимым, что перевешивает все перечисленные выше недостатки.
