Как растянуть фон css

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

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

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

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

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

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

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

  • Safari 3+
  • Chrome любой версии
  • IE 9+
  • Opera 10+ (Opera 9.5 поддерживает background-size , но не поддерживает cover )
  • Firefox 3.6+ (Firefox 4 поддерживает свойство background-size без приставки -moz )

Есть так же решение для IE, но будьте осторожно — есть мнение, что после его применения некоторые ссылки на странице не работают. Если такое случается — попробуйте применить этот код не к блокам html или body , а к блоку div , но с шириной и высотой 100%. Вот код:

Только CSS. Вариант №1

В этом примере мы будем использовать элемент img , который легко изменяет размер в любом браузере. Мы воспользуемся свойством min-height чтобы заполнить окно браузера вертикально и зададим ширину в 100% чтобы сделать тоже самое по горизонтали. Мы так же зададим min-width для того, чтобы изображение не становилось меньше чем оно есть на самом деле.

Работает в следующих браузерах:

  • В любой версии нормальных браузеров: Safari / Chrome / Opera / Firefox
  • IE 6: Работает — но есть проблемы с фиксированием изображения
  • IE 7/8: По большей части работает, но не центрирует на маленьких разрешениях, при этом заполняет экран полностью
  • IE 9: Работает

Только CSS. Вариант №2

Есть еще один довольно простой способ решить нашу задачу: использовать изображение на нашей страницу, задать ему фиксированную позицию в верхний левый угол и зададим min-height и min-width 100%, сохраняя соотношение сторон.

Тем не менее, это не центрирует изображение, что важно для нас. Мы можем решить эту проблему заключив изображение в блок div . Этот блок будет по размерам в 2 раза больше чем экран браузера. Когда же мы вставим изображение в этот блок, то оно будет находиться строго по центру окна браузера, сохранив при этом соотношение сторон.

Работает этот вариант в:

  • Safari / Chrome / Firefox (предположительно не все старые версии)
  • IE 8+
  • Opera (все версии) и IE оба неправильно понимают этот код (неправильное позиционирование, не понятно почему)

Вариант с ипользованием jQuery

Идея смотрится проще, чем реализация на CSS, если учесть, что мы знаем что соотношение сторон изображения больше или меньше соотношения сторон окна браузера. Если изображение меньше, то нам достаточно установить ширину в 100% у изображения и мы будем знать, что оно заполнит экран полностью. Соответственно, если изображение больше, то нам достаточно будет установить высоту в 100% чтобы заполнить экран изображением. Мы будем использовать JavaScript, а точнее библиотеку jQuery.

Не успеваете сдать отчеты в налоговую? Не хотите стоять в очередях? Тогда электронная отчетность в налоговую — ваш выбор. Заполни, проверь и отправь отчеты в интернете.

Как растянуть фон на всю высоту?

Хэй!
Использую шаблон от HTML5UP → html5up.net/uploads/demos/aerial
Убрал прокрутку и белые декали над фоном в CSS. Также сменил фон на картинку соотношением примерно 14:9(4288*2848). В оригинале же картинка достаточно широкая.
Появилась проблема на мобильных устройствах: картинка не заполняет свободное пространство и ужимается по ширине под ширину экрана.
4b0f2cda38bc4dfd92b5d03c86bca773.png
Сообственно, вопрос: как сделать чтобы картинка расширялась и заполняла всю высоту?
Стоит заметить, что background-size: contain или background-size: cover — не работают ):

Растянуть и масштабировать CSS фон

есть ли способ сделать фон в CSS, чтобы растянуть или масштабировать, чтобы заполнить контейнер?

16 ответов:

для современных браузеров, вы можете сделать это с помощью background-size :

cover означает растягивание изображения либо по вертикали, либо по горизонтали, так что он никогда не плитки/повторяется.

это будет работать для Safari 3 (или более поздней версии), Chrome,Опера 10+, Firefox 3.6+ и Internet Explorer 9 (или более поздней версии).

чтобы он работал с более низкими версиями Internet Explorer, попробуйте эти CSS:

использовать CSS 3 свойства background-size :

это доступно для современных браузеров, начиная с 2012 года.

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

использовать эту разметку:

со следующим CSS:

и вы должны быть сделано!

для того, чтобы масштабировать изображение ,чтобы быть "полное кровотечение" и поддерживать соотношение сторон, вы можете сделать это вместо:

это работает довольно хорошо! Однако если одно измерение обрезано, оно будет обрезано дальше только одна сторона изображения, а не равномерно обрезанные с обеих сторон (и по центру). Я проверил его в Firefox, Webkit, и Internet Explorer 8.

использовать атрибут размера фона в CSS3:

EDIT:Modernizr поддерживает обнаружение поддержки размера фона. Вы можете использовать обходной путь JavaScript, написанный для работы, однако вам это нужно, и загружать его динамически, когда нет поддержки. Это позволит сохранить код поддерживаемым, не прибегая к навязчивым CSS хаки для некоторых браузеров.

лично я использую скрипт, чтобы справиться с этим с помощью jQuery, его адаптация imgsizer. Как и большинство проектов, которые я теперь использую width % ‘ s для жидких макетов на разных устройствах, есть небольшая адаптация к одному из циклов (с учетом размеров, которые не всегда 100%):

EDIT: Вы также можете быть заинтересованы в jQuery CSS3 Finaliz[s] e.

попробуйте статью фон-в размере. Если вы используете все следующие, он будет работать в большинстве браузеров, кроме Internet Explorer.

в настоящее время нет. Он будет доступен в CSS 3, но это займет некоторое время, пока это реализовано в большинстве браузеров.

  • Safari 3+
  • Хром Все Равно+
  • IE 9+
  • Opera 10+ (Opera 9.5 поддерживает размер фона, но не ключевые слова)
  • Firefox 3.6+ (Firefox 4 поддерживает версию без префикса поставщика)

определить "растяжение и масштаб".

Если у вас есть растровый формат, это, как правило, не очень хорошо (графически говоря), чтобы растянуть его и потянуть его. Вы можете использовать повторяющиеся шаблоны, чтобы дать иллюзию того же эффекта. Например, если у вас есть градиент, который становится светлее в нижней части страницы, то вы должны использовать графику шириной в один пиксель и той же высоты, что и ваш контейнер (или предпочтительно больше для учета масштабирования), а затем выложить его по всей странице. страница. Аналогично, если бы градиент проходил по странице, он был бы на один пиксель выше и шире вашего контейнера и повторялся вниз по странице.

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

Если вы хотите эффект, который опирается на что-то вроде коробки с изогнутыми краями, то вы бы придерживаться левая сторона вашего ящика на левую сторону вашего контейнера с достаточным перекрытием, что (в пределах разумного) независимо от того, насколько велик контейнер, он никогда не заканчивается фоном, а затем вы накладываете изображение правой стороны коробки с изогнутыми краями и размещаете его справа от контейнера. Таким образом, когда контейнер сжимается или растет, эффект изогнутой коробки, кажется, сжимается или растет вместе с ним — на самом деле это не так, но это дает иллюзию того, что происходит.

Как на самом деле заставляя изображение сжиматься и расти вместе с контейнером, вам нужно будет использовать некоторые приемы наложения, чтобы изображение выглядело как фон, а некоторые javascript-чтобы изменить его размер с помощью контейнера. В настоящее время нет способа сделать это с помощью CSS.

Если вы используете векторную графику, вы далеко за пределами моей компетенции, я боюсь.

одним словом: нет. Единственный способ растянуть изображение-это с помощью <img> тег. Вам придется проявить творческий подход.

это было верно в 2008 году, когда был написан ответ. Сегодня современные браузеры поддерживают background-size который решает эту проблему. Будьте осторожны, что IE8 не поддерживает его.

вот что я сделал из этого. В классе растяжки я просто изменил высоту на auto . Таким образом, ваше фоновое изображение всегда имеет тот же размер, что и ширина экрана, а высота всегда будет иметь правильный размер.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *