Как растянуть фон на все окно браузера? Четыре простых решения на CSS и JavaScript. Свойство background-size

Часто ли вы сталкивались с сайтами, у которых фоновый рисунок растянут на всю страницу? И не важно в каком разрешении вы просматриваете сайт — фон всегда занимает весь экран браузера и не смотриться растянутым. Я тоже задавался этим вопросом и нашел ответ в хорошей статье Криса Койера. Сегодня приведу вольный перевод, максимально близко к тексту. Будут рассмотрены четыре разных способа сделать фоновый рисунок на всю страницу. В конце статьи — ссылка на архив с демо страницами.

Цель у нас такова, что фоновый рисунок на сайте должен закрывать все видимое окно браузера в любое время. Вот некоторые конкретные требования:

  • Изображение заполняет всю страницу, без пробелов
  • Рисунок масштабируется если нужно
  • Сохраняются пропорции изображения (соотношение сторон)
  • Изображение центрируется в центре страницы
  • Не появляются полосы прокрутки
  • По-возможности максимально кроссбраузерное решение
  • Без различных махинаций с флешэм

Отличный, простой и прогрессивный метод с использованием CSS

Мы можем решить нашу задачу с помощью чистого CSS, за что спасибо свойству background-size. которое появилось в CSS3. Нам понадобиться элемент html (лучше, чем использовать body. т.к. это не всегда полная высота окна браузера). Мы зададим фоновый рисунок элементу html. центрируем его, позицию выберем фиксированную ( fixed ) и скорректируем размер изображения с помощью свойства background-size. которое установим в значение cover :

Работать такой вариант будет в:

Источник: www.rusdigi.org

Категория: Онлайн-шоппинг

Похожие статьи: