Фоновые изображения в веб-дизайне: советы и примеры

18 июля 2013 | Опубликовано в Уроки | 1 Комментарий »

Мы неоднократно приводили примеры сайтов с фоновыми фотографиями. Бесспорно в данный момент такая тенденция очень популярна. Использовать фотографии в качестве бэкграундов можно не только в дизайне целевых страниц и сайтов-портфолио. На сайтах лидеров мирового рынка вы можете увидеть именно такой дизайн. В этой статье мы рассмотрим несколько практических советов по созданию сайтов с фоновыми страницами. Также в конце статьи сможете еще раз увидеть примеры применения фоновых картинок.

Давайте рассмотри основные техники создания больших полноэкранных изображений. Это может быть реализовано с помощью свойств CSS3 и CSS2, либо с помощью опен-сорс jQuery плагинов. Здесь вы не найдете ответы на вопросы, что является правильным, а что неправильным. Просто различные варианты реализации в разных браузерах.

Хитрости CSS

Перед тем, как начать, хотелось порекомендовать вам старую статью Криса Койера. Это старая статья, и она демонстрирует процесс создания большого фонового изображения с помощью css.

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

Посмотрим на код.

html {
  background: url(http://media02.hongkiat.com/oversized-background-image-design/bg.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale')";
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.http://media02.hongkiat.com/oversized-background-image-design/bg.jpg', sizingMethod='scale');
}

Демо

Мы будем применять стили к тегу HTML, а не к тегу body. Далее создадим изображение в центре, которое не будет повторятся и не будет менять свое положение при прокрутке страницы.

Использование вендорных префиксов обеспечит более качественное отображение в разных браузерах.

Следует отметить, что свойства filter не всегда правильно отображаются в IE. Могут возникнуть проблемы при прокрутке, а также при выделении текста. Чтобы избежать это, можете попробовать применить стили к фоновому изображению, которое будет размещено внутри блока элемента body, задав 100% width/height.

CSS2

Большинство браузеров поддерживают предыдущий метод. Но в качестве примеров можно привести вам еще и этот способ — добавление css стилей к элементу img .

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

img.bg{

  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;  
  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

Демо

Тег с изображение должен быть расположен непосредственно внутри body перед любым другим открывающимся тегом. Изображение будет размещено в качестве фона, и все другие элементы будут размещаться на нем. Это, как известно, работает во всех основных браузерах (Safari / Firefox / Chrome / Opera), но не слишком хорошо поддерживается в IE6-7.

Решение с помощью JavaScript

Давайте перейдем к более динамичному коду с использованием jQuery-плагинов, вместо типичного css. Чаще всего такие плагины написаны для гибких макетов, так как отображение в смартфонах и адаптивность шаблонов сейчас очень важна. С jQuery разработчики сталкиваются практически каждый день, поэтомуследующий вариант не должен вызывать особых трудностей.

Сейчас существуют десятки вариантов подобных плагинов. Но мы рассмотрим три любимых. Большинство с этих библиотек очень просты в реализации и установке на ваш сайт. Все они размещены на Github и являются опенсорс кодом. Это означает, что многие разработчики делятся своими знаниями и предлагаю варианты устранения тех или иных багов и недоработок.

Backstretch

Вы уже, наверное, видели название этого плагина. Backstretch — достаточно популярный плагин, который используется вот уже более трех лет, начиная с 2009. Разработчики достаточно активно обновляют этот плагин, и теперь он уже поддерживает разные слайдеры изображений и фоновые картинки.

Для реализации этого кода в ваш проект, его просто нужно загрузить с сайта, и внедрить в ваш код, используя тег скрипта. Если вы хотите использовать облачный CDN-хостинг, можете использовать ссылку cdnjs . Теперь вам нужно просто открыть еще один тег скрипта и вставить строку jQuery кода.

$.backstretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg");

Демо

Backstretc — очень легкий плагин. И внедрить его в проект сможет даже разработчик, который не знает всех технических тонкостей. Используя его, вам не понадобиться применять дополнительную HTML разметку и CSS свойства. Картинка получится адаптивной и нормально будет отображаться в окнах браузера с различными размерами экрана.

// Duration is the amount of time in between slides, 
// and fade is value that determines how quickly the next image will fade in 
$.backstretch([
    "http://media02.hongkiat.com/oversized-background-image-design/photo1.jpg",
    "http://media02.hongkiat.com/oversized-background-image-design/photo2.jpg",
    "http://media02.hongkiat.com/oversized-background-image-design/photo3.jpg"
], {duration: 3000, fade: 750});

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

Vegas

Vegas Background jQuery plugin - еще один вариант быстрой реализации фонового изображения. Преимуществом этого плагина являются возможность выбора определенного эффекта для фона, например наложение точек. Другие варианты вы можете посмотреть в документации к плагину.

Вам нужно будет добавить копию кода Vegas JS and CSS, который сможете скачать на странице Github. Этот плагин может работать, используя только одну строчку кода, но по сравнению с Backstretch он имеет множество дополнительный настроек.

$.vegas({

  src:'/img/background.jpg'
});

Демо

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

Anystretch

Последний плагин, который мы рассмотри — Anystretch. Он очень похож на Backstretch. Как видим, веб-разработчики могут выбрать тот или иной путь решения поставленной задачи. В данном случае, это применение изображения в качестве фона.

Скрипт реализуется аналогичным способом — мы должны вставить нужные файлы anystretch files. Затем просто настроить синтаксис, как в примере, и поместить код между тегами <script> </script>. Обратите внимание на параметр speed, который показывает время в милисикундах, за которое изображение будет гаснуть.

$.anystretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg", {speed: 150});

Демо

Этот способ также отлично подойдет, если вы работаете с дивами или другими элементами, размещенными внутри body. Каждая BG будет отлично отображаться, независимо от размера экрана. Пример ниже демонстрирует размещение фонового изображения на блок с идентификатором #leftbox.

$('#leftbox').anystretch("http://media02.hongkiat.com/oversized-background-image-design/bg.jpg", {speed: 150});

Окончательный вариант

К счастью, мы живем в эпоху, когда ту или иную проблему решить можем более чем одним способом.

Я не могу назвать, какой из вышеперечисленных вариантов будет лучше. Правильный выбор будет зависеть от вашего сайта. Лично я отдаю предпочтение HTML5/CSS3 , так как CSS3 код позволяет нормально отображаться в современных браузерах. Хотя нужно признаться, что многие из плагинов JQuery также отлично работают даже для плагинов, которые не поддерживают свойства CSS3.

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