В этой статье подробно остановимся на казалось бы таком незначительном элементе сайта, как его фон. Многие начинающие вебмастера не придают фону практически никакого значения, считая его лишь скромной подложкой для основного контента сайта. И в этом есть доля правды. Однако от типа и внешнего вида фона может довольно много зависеть.
Можно выделить 3 основных типа фона – фон в виде заливки (градиентной или одноцветной), фон, выполненный в виде маленького повторяющегося изображения и фон в виде одного большого изображения. Чаще всего встречается первый тип. Однако фон в виде изображений может быть более интересным и разнообразным. Такой фон может максимально точно отражать тематику сайта.
Если говорить о фоне в виде одной большой картинки, то эта самая картинка должна обладать размерами, которые позволили бы заполнить собой все пространство монитора. При этом ориентироваться нужно на монитор высокого разрешения (монитор самого большого разрешения, с которого ваш сайт могут просматривать пользователи).
Эта и есть самая главная проблема при создании такого фона. Если картинка будет недостаточно большой, то на мониторах высокого разрешения останется место, не заполненное картинкой. Все это будет выглядеть не очень эстетично. Следующая проблема при создании такого фона – это отсутствие симметричности изображения. Сам картинка может быть симметричной (найти такую картинку в интернете не составит проблем).
Однако она обладает фиксированным разрешением. То есть симметричной она будет лишь при просмотре сайта на мониторе с точно таким же разрешением. Если разрешение монитора меньше, то симметричность будет утрачена. Конечный результат получится не совсем эстетичным. Картинку, симметричность отображения которой не зависела бы от разрешения монитора, подобрать весьма и весьма сложно (тут гораздо проще создать фон из маленьких симметричных изображений, которые бы заполняли собой все пространство монитора).
Еще один недостаток фона в виде большой картинки – это его некорректное отображение на современных мобильных устройствах. Многие современные смартфоны обладают вытянутым дисплеем высокого разрешения (сопоставимым по разрешению с мониторами компьютера). Однако монитор компьютера имеет альбомную ориентацию, а дисплей смартфона – книжную. Следовательно, картинка заполнит собой лишь какую-то часть дисплея.
Следующий недостаток заключается в том, что большая по разрешению картинка, как правило, много весит (от нескольких сотен килобайт до нескольких мегабайт). Соответственно, в браузере такая картинка будет грузиться довольно долго (по сравнению с фоном из однотонной заливки или мозаичным фоном). Данная проблема была особенно острой еще несколько лет назад, когда скорость интернет-соединения у большинства пользователя была довольно низкой. Теперь это уже не так актуально.
Преимущество у фона в виде большого изображения лишь одно, но оно довольно внушительное. Это возможность подбора фона, максимально близкого к дизайну сайта. Кроме того, чисто визуально такой фон выглядит намного приятнее и эффектнее.