Большие фоновые изображения в веб-дизайне: советы и примеры

В этой статье я хочу собрать несколько основательных приемов для создания больших, негабаритных фоновых изображений. Это может быть достигнуто с помощью базовых техник CSS3 / CSS2 или с помощью некоторых сторонних плагинов jQuery с открытым исходным кодом. Там нет правильных или неправильных ответов, просто разные уровни поддержки в старых устаревших браузерах.

Изучите эту коллекцию захватывающих методов разработки и посмотрите, что вы можете собрать вместе.
CSS хитрости торговли
Для начала я хотел бы представить очень полезный статья размещена на CSS Tricks в котором изложены многие из этих идей. Самое простое решение с наивысшим уровнем поддержки — это методы CSS. Я обнаружил, что метод CSS3 будет работать должным образом в большинстве распространенных браузеров, и есть даже хаки для обработки старых версий Internet Explorer.

Давайте взглянем на код CSS3 для размещения этих фоновых изображений на 100% -ной ширине. Я буду использовать коды из статьи Криса Койера, чтобы объяснить, насколько легко это можно реализовать.
html {
  background: url (https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg) фиксированный центр без повтора центра;
  -webkit-background-size: обложка;
  -moz-background-size: обложка;
  -o-background-size: обложка;
  размер фона: обложка;
  -ms-фильтр: «progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ‘https: //assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg’, sizingMethod = ‘scale’)»;
  filter: progid: DXImageTransform.Microsoft.AlphaImageLoader (src = ‘. https: //assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg’, sizingMethod = ‘scale’);
}
Элемент HTML является гораздо более легкой целью, чем тело, так как мы знаем, что все заключено внутри. Затем мы применяем фоновое изображение с полным центральным положением, без повтора и фиксируем при прокрутке. Более новый CSS3 фон-размер свойство это то, что применяет всю магию позиционирования. Использование префиксов многих поставщиков также предоставит нам более широкий спектр поддержки.

Следует отметить, что свойства фильтра не всегда хорошо воспроизводились внутри IE. Некоторые люди сообщают о проблемах с полосами прокрутки или выделением текста на странице. Чтобы обойти эту ошибку, вы можете попробовать применить коды фонового изображения к внутреннему элементу div внутри тела, установив полную ширину / высоту 100%.
CSS2 Fallback
Удивительно, но я обнаружил, что больше браузеров поддерживают метод CSS3, чем любые другие стили. Но я все еще буду предлагать этот вторичный метод, используя обычные свойства CSS для элемента img.

Я чувствую, что самый большой нюанс с этим методом заключается в том, что при щелчке правой кнопкой мыши по фону открывается контекстное меню, как будто вы нажимаете на изображение, а не на веб-страницу. Это может раздражать посетителей, которые не могут понять, почему меню отличается. Но если вы боретесь с методом CSS3 и по-прежнему хотите избежать JavaScript, то это может быть вашим единственным вариантом.
img.bg {
  / * Установить правила для заполнения фона * /
  минимальная высота: 100%;
  минимальная ширина: 1024 пикселей;

  / * Настройка пропорционального масштабирования * /
  ширина: 100%;
  высота: авто;

  / * Настройка позиционирования * /
  положение: фиксированное;
  верх: 0;
  слева: 0;
}

Тег изображения должен быть расположен прямо внутри вашего тела, прежде чем открывать любые другие элементы. Изображение упадет на задний план, и весь ваш другой контент должен обернуться вокруг. Известно, что это работает во всех основных браузерах (Safari / Firefox / Chrome / Opera), но не поддерживается в IE6-7.
Решения JavaScript
Давайте перейдем к более динамичным кодам, используя плагины jQuery вместо типичных CSS. Они часто пишутся с гибкостью, поэтому мобильные смартфоны и адаптивные макеты должны быть приоритетом № 1. jQuery также является довольно распространенным языком, с которым большинство веб-разработчиков знакомы.

Можно выбрать из десятков плагинов jQuery, но я представлю три моих фаворита. Большинство из этих библиотек кода очень легко реализовать и настроить на новом веб-сайте. Все они размещены на Github и, таким образом, представляют собой отличное решение с открытым исходным кодом. Это означает, что вы можете ожидать меньше ошибок и большей поддержки, так как все больше разработчиков делятся своими знаниями в базе кода каждого плагина.
Бэкстретч
Некоторые разработчики видели название Бэкстретч появляются на других сайтах и ​​в блогах. Это очень популярный плагин, который существует уже почти 3 года, начиная с декабря 2009 года. Разработчики с нетерпением обновляли этот плагин, и теперь он даже поддерживает слайд-шоу изображений и статические фоновые изображения.

Чтобы реализовать код самостоятельно, просто скачать копию сценария и прикрепите его к своей веб-странице с помощью тега сценария. Если вы хотите использовать облачный хостинг CDN, попробуйте эта ссылка cdnjs вместо. Тогда нам просто нужно открыть другой тег сценария и набрать одну строку кода jQuery, например:
$ .Backstretch ( «https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg»);

Библиотека кода была написана для однострочного исполнения. Это делает Backstretch очень простым даже для нетехнических веб-разработчиков. Вам не нужно применять дополнительную HTML-разметку или другие свойства CSS. И изображения будут вести себя как 100% реагировать на окно браузера.
// Длительность — это промежуток времени между слайдами,
  // и fade — это значение, которое определяет, как быстро исчезнет следующее изображение
  $ .Backstretch ([
«https://assets.hongkiat.com/uploads/oversized-background-image-design/photo1.jpg»,
«https://assets.hongkiat.com/uploads/oversized-background-image-design/photo2.jpg»,
«https://assets.hongkiat.com/uploads/oversized-background-image-design/photo3.jpg»
], {длительность: 3000, затухание: 750});

Приведенный выше код немного изменен для поддержки слайд-шоу в фоновом режиме. У вас есть возможность перечислить столько местоположений изображений, сколько вы хотите отобразить в слайд-шоу, а затем два бита метаданных. Значение длительности — это промежуток времени между слайдами, закодированный в миллисекундах. 2-е значение постепенного изменения определяет, сколько миллисекунд требуется для перехода от одного изображения к другому.
Vegas
Vegas Background jQuery плагин это еще один отличный выбор для веб-разработчиков, которые ищут быструю реализацию. Что выделяет Vegas в отдельности, так это то, что у вас есть больше возможностей для настройки фона. На самом деле можно настроить эффект наложения, используя полосы или точки сверху вашей фотографии. Демо можно увидеть на Страница настройки документации Vegas который использует крапчатый эффект наложения.

Вам нужно будет включить копию файлов Vegas JS и CSS, которые можно найти на Страница Github, Этот плагин может работать, используя только одну строку кода, но есть так много возможных настроек по сравнению с Backstretch. А пока давайте создадим простой демонстрационный пример в коде:
$ .vegas ({
  ЦСИ: ‘/ IMG / background.jpg’
});

Хотите верьте, хотите нет, но мы также можем использовать только одну строку или блок кода, чтобы получить тот же эффект, что и раньше. Вегас позволяет дальнейшую настройку, если вы хотите создать слайд-шоу изображений или добавить любую текстуру наложения. На наложение страницы документов вы заметите серию образцов, которые вы можете прямо здесь продемонстрировать. Это один из замечательных примеров преимуществ наложения изображений с помощью Vegas по сравнению с другими плагинами jQuery.
Anystretch
Мое окончательное решение jQuery — плагин под названием Anystretch который на самом деле является вилкой плагина Backstretch. Существуют незначительные различия, которые могут помочь разработчикам, желающим обновить фоновое изображение или применить фоновые рисунки к различным элементам страницы.

Этот скрипт работает так же, как и раньше, где вам понадобится копия jQuery и копия Anystretch файлы, Затем просто настройте синтаксис, как у меня ниже, помещенный в другой набор теги. Обратите внимание, что параметр скорости определяет, насколько быстро изображение исчезнет после завершения загрузки, измеряется в миллисекундах.
$ .anystretch («https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg», {скорость: 150});

Этот метод также отлично работает с элементами div или другими элементами, находящимися внутри тела. Размер каждой BG-фотографии будет по-прежнему изменяться при правильном соотношении сторон, и он будет полностью реагировать на мобильные браузеры. Демонстрационный код ниже помещает фоновое изображение в div с идентификатором #leftbox.
$ (‘# leftbox’). anystretch («https://assets.hongkiat.com/uploads/oversized-background-image-design/bg.jpg», {скорость: 150});

Окончательное решение?
В конечном итоге мы живем в эпоху с более чем одним решением проблем семантической сети. Фронтенд-разработчики постоянно стремятся к большей поддержке и выясняют новые способы взлома браузера. Это идеально подходит для сообщества дизайнеров, которые заинтересованы в быстром применении этих методов в макетах веб-страниц.

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

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

В этой витрине я собрал более 60 примеров веб-сайтов с использованием больших фоновых фотографий. Проверьте стили макета и посмотрите, как вы можете имитировать подобную технику в ваших собственных проектах.
Hiut Denim
Керем Суер
Guns ‘n Roses
Н-Арт
Cayena Agency
Дизайн Хаус Стокгольм
Мартин Коста
Интерьер Davidia
Даниэль Филлер
Whitmans
Тим Руссилье
Tag Interactive
Анна Сафрончик
DOJO Studio
Encandle
CreativePeople
Двенадцать Ресторан
de Certeau & Associates
Medis Food & Bar
Ян Студиос
Слепой парикмахер
Reflexion Weddings
CGRendering
Шелли Сэндзер
Маркус Томас
Биамар 2012
Inzeit
Блиц СФ
Au Petit Panisse
Рингве Медиа
Шоу и Шоу Фотографии
Werkstette
Salt Surf
Пабло Гонсалес
Дэвид Маллетт
Мокси созо
Дэвид Нолан
Flaek
Pizzaza
500 Вт
Дельфины Общение
Лучшие фотографы доллара
Лучшие модели доллара
Ребекка Барри
Истории исцеления
Голиаф Спортивная одежда
Onside Спортивное Агентство
Джейсон Миллер
Показать объявление
Инес Паперт
Прогулка по воздуху
Хассе Бронтен
Инес Мария Гамлер
Бригада убийц
35 мм дизайн
Весна лето
Sandlewood Homes
Мэтт Портерфилд
Архитектура ASAA
AyerViernes
ах asociados