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

Растянуть background на всю ширину с помощью CSS. Фон, который всегда растягивается на всю страницу Css растянуть изображение на всю ширину

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

Техника с использованием только CSS. Часть #1.

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

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

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.

IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

Техника с использованием только CSS. Часть #2.

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

Однако так изображение не центрируется. Поэтому обернем изображение в элемент

Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).

Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

Как растянуть картинку на весь экран с помощью css и других проверенных способов. Фон, который всегда растягивается на всю страницу Background image css растянуть на всю страницу

Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только HTML + CSS (без использования JS).

Итак, требования к фоновому изображению у нас следующие:

  • Покрывается 100% ширины и высоты страницы
  • Фон масштабируется при необходимости (background растягивается или сжимается в зависимости от размеров экрана)
  • Сохраняются пропорции картинки (aspect ratio)
  • Изображение центрировано на странице
  • Фон не вызывает скроллов
  • Решение максимально кроссбраузерное
  • Не используются никакие другие технологии кроме CSS

Способ 1

На мой взгляд, это лучший способ, ведь он самый простой, лаконичный и современный. Он использует свойство CSS3 background-size , которое мы применяем к тегу html . Именно html , а не body , т.к. его высота больше или равна высоте окна браузера.

Устанавливаем фиксированный и центрированный фон, затем корректируем его размер, используя background-size: cover .

Этот способ работает в

Chrome (любая версия) Opera 10+ Firefox 3.6+ Safari 3+ IE 9+

Способ 2

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

img.background < min-height: 100%; min-width: 640px; width: 100%; height: auto; position: fixed; top: 0; left: 0; /* Зависит от размера изображения */ @media screen and (max-width: 640px)< img.bg < left: 50%; margin-left: -320px; >> >

Этот способ работает в:

  • Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
  • IE 9+

Способ 3

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

Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в

Этот способ работает в хороших браузерах и IE 8+.

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

Веб технологии, как и различного рода тенденции в дизайне, не стоят на месте, поэтому каждый раз появляются какие-то оригинальные фишки и нюансы для сайтов. Одним из подобных «направлений» является использование фона (backgorund), который растягивается на весь экран по ширине и высоте. Что-то вроде около года назад или больше я рассказывал — изображение помещалось в шапку блога и плавно «переходило» в основной фоновый цвет веб-страницы. При желании можно даже добавить .

Размещение в качестве бекграунда большой масштабируемой картинки — это что-то новое и более сложное занятие, решение которого нашел в этой статье .

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

  • заполнить всю страницу одним изображением без пробелов;
  • изменение размеров картинки при необходимости (уменьшении окна браузера);
  • сохранение пропорций изображения;
  • расположение изображения в центре страницы;
  • отсутствие полос прокрутки на странице;
  • кросс-браузерное решение, подходящее для разных браузеров;
  • реализация без всяких сторонних технологий типа flash.

Итак, имеется сразу несколько подходящих решений для фона сайта на весь экран.

Замечательное, простое и прогрессивное решение с помощью CSS3

Для реализации задачи мы можем использовать свойство background-size в CSS3. Будем использовать элемент html который получше body. Установим фиксированный и центрированный бэкграунд, после чего будем использовать в background-size значение cover.

Решение поддерживают почти все популярные в сети:

  • Firefox 3.6+ (Firefox 4 supports non-vendor prefixed version)
  • Opera 10+ (Opera 9.5 поддерживает background-size но без значения cover)
  • Chrome Whatever+
  • IE 9+
  • Safari 3+

Некий Goltzman нашел решение, которое позволяет работать хаку в IE

filter : progid: DXImageTransform.Microsoft .AlphaImageLoader(src= ".myBackground.jpg" , sizingMethod= "scale" ) ; -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://nature-secret.ru/power-supplies/kak-rastyanut-kartinku-na-ves-ekran-s-pomoshchyu-css-i-drugih/myBackground.jpg", sizingMethod="scale")" ;

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://nature-secret.ru/power-supplies/kak-rastyanut-kartinku-na-ves-ekran-s-pomoshchyu-css-i-drugih/.myBackground.jpg", sizingMethod="scale"); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="https://nature-secret.ru/power-supplies/kak-rastyanut-kartinku-na-ves-ekran-s-pomoshchyu-css-i-drugih/myBackground.jpg", sizingMethod="scale")";

Но внимание. при этом могут возникнуть некоторые проблемы с работой ссылок на странице. Кстати, чуть позже Matt Litherland добавил что код, в принципе, можно использовать но для этого нельзя применять элементы html или body а нужно реализовать все через div с 100% высотой и шириной.

CSS -хак номер 1

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

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 ; >@media screen and (max-width : 1024px ) < /* Specific to this particular image */ img.bg < left : 50% ; margin-left : -512px ; /* 50% */ >>

Работает в любых версиях качественных браузеров — Safari / Opera / Firefox и Chrome. Для IE как всегда есть свои нюансы:

  • IE 9 — работает;
  • IE 7/8 — чаще всего функционирует правильно, но не центрирует изображения меньше окна браузера;
  • IE 6 — можно настроить, но кому вообще нужен этот браузер.

CSS -хак вариант 2

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

  • Safari / Chrome / Firefox (слишком ранние версии не тестировались, но в последних работает хорошо)
  • IE 8+
  • Opera (любая версия) и вместе с IE both оба глючат одинаково с ошибкой позиционирования.

Метод с jQuery

Данный вариант намного легче (с точки зрения CSS) если мы знаем что соотношение сторон картинки (img используется в качестве фона) больше или меньше текущего соотношения окна браузера. Если меньше, то мы можем использовать только width = 100% и при этом по ширине и высоте окно будет одинаково заполнено. Если больше — можно указать только height = 100% для заполнения всего окна.

Доступ ко всем данным идет через JavaScript, коды используются следующие:

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

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

Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.

IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.

IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.

Техника с использованием только CSS. Часть #2.

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

Однако так изображение не центрируется. Поэтому обернем изображение в элемент

Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).

Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).

Используем jQuery

Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.

Как растянуть картинку на весь сайт html

Известно, что ширина окна браузера варьируется в довольно широких пределах,
поэтому подгадать под нее не представляется возможным. Установить рисунок на
всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина
при этом четко задана, и сделать рисунок требуемого размера достаточно просто.
Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой,
а лишь о ширине макета, в который вписывается вся информация. Например, на сайте
boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений
не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

Рис. 1. Главная страница сайта boeing.com

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

Растягивание рисунка до 100%

Первый метод состоит в том, что для тега <img>
значение атрибута width устанавливается равным
100% (пример 1). Изображение в таком случае растягивается на всю ширину
контейнера, а его высота остается неизменной. Понятно, что в рисунке при этом
неизбежно появятся искажения, поэтому подобный метод применяется достаточно
редко и далеко не для всех картинок.

Пример 1. Ширина изображения

В данном примере ширина (width) рисунка задана
как 100%, а высота (height) — 100 пикселов.

Использование бесшовного фонового изображения

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

Рис. 2. Изображения для создания фона

Ширину рисунка достаточно сделать 20–30 пикселов.

Остерегайтесь делать слишком малую ширину подобной картинки, вроде
1–2 пикселов, поскольку это принесет только вред. Объем файла уменьшится незначительно,
а браузеру потребуется достаточно времени, чтобы полностью «замостить» нужную
площадь.

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

Рис. 3. Картинка для наложения на фон

Данное изображение должно выравниваться по левому краю окна браузера, поскольку
правый край рисунка совмещается с фоном. Именно в этом случае и картинка и фон
образуют цельное изображение. В примере 2 приведено создание подобного
блока за счет использования стилевого свойства background.

Пример 2. Фоновая картинка

<!DOCTYPE HTML PUBLIC &#171;-//W3C//DTD HTML 4.01//EN&#187; &#171;https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=&#187;Content-Type&#187; content=&#187;text/html; charset=utf-8&#8243;>
<title>Фоновое изображение</title>
<style type=&#187;text/css»>
BODY <
margin: 0; /* Убираем отступы в браузере */
>
#toplayer <
background: url(images/bg.gif) repeat-x; /* Параметры фона */
height: 69px; /* Высота слоя */
border-bottom: 2px solid maroon; /* Параметры линии внизу */
>
</style>
</head>
<body>
<div /> <img src=&#187;images/logo.gif&#187; width=&#187;279&#8243; height=&#187;69&#8243; alt=&#187;Логотип сайта»>
</div>
</body>
</html>

В данном примере высота блока задается с помощью свойства height,
она совпадает с высотой рисунка, а его ширина по умолчанию равна auto,
иными словами, занимает всю доступную ширину. Повторение фона происходит только
по горизонтали, это обеспечивает значение repeat-x свойства background.

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

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Рис. 4. Изображение с градиентом для размещения на цветном фоне

Графические файлы в формате JPEG не всегда подходят для наложения на цветной
фон из-за того, что этот формат вносит искажения в рисунок. За счет этого, гладкого
перехода от изображения к фону может не получиться, поскольку будет виден заметный
стык. В этом случае лучше применять формат GIF или PNG.

При использовании одноцветного фона код незначительно поменяется (пример 3).
Повторять фон теперь не нужно, поэтому свойство background
будет иметь только одно значение — желаемый цвет фона.

Пример 3. Цвет фона

<!DOCTYPE HTML PUBLIC &#171;-//W3C//DTD HTML 4.01 Transitional//EN&#187; &#171;https://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=&#187;Content-Type&#187; content=&#187;text/html; charset=utf-8&#8243;>
<title>Фоновый цвет</title>
<style type=&#187;text/css»>
BODY <
margin: 0; /* Убираем отступы в браузере */
>
#toplayer <
background: #66a240; /* Цвет фона */
height: 100px; /* Высота слоя */
font-family: Verdana, sans-serif; /* Гарнитура шрифта */
font-size: 32px; /* Размер шрифта */
font-weight: bold; /* Жирное начертание */
color: white; /* Белый цвет текста */
>
</style>
</head>
<body>
<div /> <img src=&#187;images/logo2.png&#187; width=&#187;193&#8243; height=&#187;100&#8243; alt=&#187;Логотип сайта&#187; align=&#187;middle»>
Выставка цветов
</div>
</body>
</html>

В данном примере устанавливаем параметры блока — его высоту и цвет, а
также характеристики текста заголовка. Полученный результат продемонстрирован
на рис. 5.

Совмещение цвета фона и рисунка

Рис. 5. Совмещение цвета фона и рисунка

Фоновый рисунок большой ширины

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

Большая ширина рисунка обеспечивает просмотр фактически при любом разрешении
монитора, кроме, разве что, самого фантастического и редко используемого. Если
такой рисунок просто добавить через тег <img>,
то однозначно получим горизонтальную полосу прокрутки и расползающийся по всем
швам макет страницы. Использование изображения как фона и обеспечивает отсутствие
ненужной полосы прокрутки. При этом картинка будет занимать всю ширину макета,
но ее часть будет скрыта от глаз пользователя, и появляться только при увеличении
окна браузера. На рис. 6 показан такой фоновый рисунок. Видно, что часть изображения
не помещается в окне, но оставшийся фрагмент занимает всю доступную ширину.

Рис. 6. Фоновый рисунок в окне браузера

Рис. 6. Фоновый рисунок в окне браузера

Применяется опять же
свойство background, в качестве его значения задается путь к фоновой
картинке и ее параметры. Так, значение right top
говорит, что правый край изображения будет фиксироваться, а при изменении ширины
окна браузера станет появляться левая невидимая часть картинки. Если это значение убрать, то по умолчанию будет фиксироваться левый край (пример 4).

Пример 4. Рисунок на всю ширину страницы

<!DOCTYPE HTML PUBLIC &#171;-//W3C//DTD HTML 4.01//EN&#187; &#171;https://www.w3.org/TR/html4/strict.dtd»>
<html>
<head>
<meta http-equiv=&#187;Content-Type&#187; content=&#187;text/html; charset=utf-8&#8243;>
<title>Фоновое изображение</title>
<style type=&#187;text/css»>
BODY <
margin: 0; /* Убираем отступы в браузере */
>
#toplayer <
background: url(images/popart.png) no-repeat; /* Параметры фона */
height: 200px; /* Высота слоя */
>
</style>
</head>
<body>
<div /> </body>
</html>

При использовании фонового рисунка следует учитывать свойственные этому методу
ограничения. А именно:

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

Резюме

Способ добавления изображения на всю ширину макета веб-страницы зависит от
применяемого метода верстки. Если используется макет фиксированной ширины, то
общая его ширина известна заранее и рисунок по горизонтали следует ограничить
этой величиной. Когда мы имеем дело с «резиновым» макетом, то в этом случае
активную роль играют фоновые рисунки. Они повторяются по горизонтали таким образом,
что получается слитная единая картинка. Также применяются широкие фоновые изображения,
которые не приводят к появлению горизонтальной полосы прокрутки, но при этом
занимают всю отведенную им ширину, независимо от размера окна браузера.

Доброго времени суток, гики сайтостроения и любители веб-тематики. Сегодня я хочу дать ответ на часто задаваемый вопрос не только новичками, но иногда и разработчиками: «Как растянуть картинку css на весь экран?» На самом деле такой прием очень просто реализовывается, но тут дело в другом.

На сегодняшний день существует множество способов и языков программирования, благодаря которым изображение может размещаться на целый экран. Поэтому в данной публикации я расскажу о нескольких способах создания полноразмерного фонового изображения при помощи css, css3, jquery и php. Приступим к делу!

Способ 1. Адаптивная фоновая картинка css-средствами

Для того чтобы сделать фоновое изображение адаптивным, в каскадных стилевых таблицах предусмотрено свойство background- size. Оно позволяет установить размер графического файла по отношению к размерности открытой вкладки браузера.

Для этого нужно всего лишь написат вот такую строку:

background- size: 100% auto

Первый параметр, т.е. 100%, отвечает за растягивание картинки по горизонтали, второй параметр – по вертикали. Теперь перейдем к примеру.

color:#191970;
>
div <
background: #6495ED;
width: 86%;
margin: 14% 4% 4% 4%;
padding: 35px;
>
h1 <
color: #191970;
text-shadow: 3px 2px 1px #fff;
>

Такой способ поддерживают браузеры, начиная с 10 версии Opera, 3 версии Safari, Firefox 3.6 и 9 версии IE.

Способ 2. Резиновый фон при помощи css3

Пример резинового фона

С выходом в мир спецификации css3 в язык добавилось много удобных инструментов. Так, для создания растянутого фона в виде изображения используется то же свойство, что и в предыдущей главе, однако размер изображения задается не процентами, а специальным словом cover: background- size: cover. Очень удобно, не правда ли?

Чтобы посмотреть, как работает данное свойство, запустите прошлый пример, изменив в параметры background-size 100% и auto на cover.

Что касается браузеров, то такой способ поддерживают все современные версии.

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

Способ 3. jQuery и его инструменты создания адаптивного фона

Для начала хочу сказать, что jQuery – это библиотека другого языка – JavaScript – которая упрощает функционирования последнего с html.

Сам по себе jQuery очень удобен. С ним проще работать с API, легче получать доступ к различным элементам кода, а также проще реализовывать некоторые вещи.

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

Ниже я прикрепил программный код примера с уже вставленной в него реализацией jQuery.

Этот способ является универсальным и поддерживается многими браузерами даже тогда, когда css-инструменты не работают.

Способ 4. Php-реализация растянутого на весь экран изображения

Несколько слов о самом языке. Php принято называть языком сценариев. С его помощью пишут серверную часть веб-приложений, т.е. связывают сервис с базой данных, обрабатывают запросы и т.д. Сам код php внедряется в html и гибко взаимодействует с ним.

Чтобы вставить кусок кода, нужно прописать текст в вот таких скобках:

А теперь в первоначальный пример вам нужно вставить всего лишь несколько строк:

1
2
3
4
5
<?php $(function() <
h = $(window).height();
w = $(window).width();
$(body).style(&#8216;background&#8217;,&#8217;url(путь?src=название_картинки&w=&#8217;+w+&#8217;&h=&#8217;+h);
>);?>

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

В этот момент, например, решение на языке php применится к рисунку только после отработки функции на сервере.

На этой ноте я заканчиваю статью. Не забывайте подписываться на мой обучающий блог и делиться ссылкой на публикации с друзьями. Пока-пока!

С уважением, Роман Чуешов

Изображения – важная часть привлекательного дизайна сайта. Фоновые изображения могут прибавить визуального интереса странице. background image HTML поможет получить тот визуальный дизайн, который вы ищете.

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

Лучший способ растянуть изображение — это использовать свойство CSS3 «background-size». Вот пример, который использует фоновое изображение для body страницы, и устанавливает размер в «100%«. Поэтому рисунок всегда растянется и заполнит весь экран.

Это свойство работает в IE 9+, Firefox 4+, Opera 10.5+, Safari 5+, Chrome 10.5+ и во всех популярных мобильных браузерах.

Имитация растянутого фона в устаревших браузерах

Маловероятно, что понадобится обеспечивать поддержку HTML body background image браузерам старше IE9. Но предположим, что вас беспокоит, будет ли сайт корректно отображаться в IE8. В этом случае нужно имитировать растянутый фон. Можно использовать префиксы браузеров для Firefox 3.6 (-moz-background-size) и Opera 10.0 (-o-background-size).

Самый легкий способ имитировать растянутое фоновое изображение — это растянуть его по всей странице. Тогда не останется лишнего пространства, и не нужно будет волноваться, что текст не поместится в растянутую область. Вот как можно HTML background image растянуть:

  1. Добавьте изображение для фона как первый элемент веб-страницы, и назначьте ему id равное «bg»:
  1. Расположите фоновое изображение так, чтобы оно было зафиксировано сверху и слева, было 100% в ширину и 100% в высоту.
    Добавьте приведенный ниже код в таблицу стилей:
  1. Поместите все содержимое страницы внутрь элемента DIV с id «content». Добавьте DIV под изображением:

Примечание: сейчас пришло время взглянуть на страницу. Изображение должно выглядеть растянутым, но содержимое пропало. Почему? Фоновое изображение 100% в высоту, а раздел содержимого располагается в потоке документа после изображения – большинство браузеров не отобразят его.

  1. Задайте содержимому относительное позиционирование и задайте z-index, равный 1. Это поднимет его над фоновым изображением в браузерах. Добавьте приведенный ниже код в таблицу стилей:
  1. Свойство HTML CSS background image в Internet Explorer 6 несовместимо с современными стандартами. Есть много способов спрятать CSS от любого браузера, кроме IE6, но самое это использовать условные комментарии.
  2. Обязательно проверьте это в IE 7 и IE 8. Возможно, понадобится откорректировать комментарии.

Немногим сайтам необходимо поддерживать IE 7 или 8, а IE6 – еще меньше! Как таковой, этот подход устарел. Я оставляю это как любопытный пример того, насколько было трудно до того, как все браузеры стали работать сообща!

Имитация растянутого фонового изображения на меньшем пространстве

Можно применить похожую технику, чтобы имитировать растянутое фоновое изображение на HTML div background image или другом элементе веб-страницы. Это сложнее, так как нужно либо использовать абсолютное позиционирование.

  1. Разместите на странице изображение, которое будет использовано как фон.
  2. В таблице стилей установите ширину и высоту изображения. Заметьте, что можно подставить проценты, но мне легче использовать значения длины.
  1. Поместите содержимое в div с id «content», как мы делали раньше.
  2. Задайте div с содержимым ширину и высоту, соответствующую размерам фонового изображения:
  1. После этого разместите содержимое на той же высоте, что и фоновое изображение. Не забудьте добавить для содержимого z-index, равный 1.

Свойства background-size и background image HTML широко поддерживаются браузерами, и этот подход, скорее всего, можно расценивать как продукт прошедшей эпохи. Если вы захотите использовать такой подход, обязательно проверьте его в как можно большем количестве браузеров. И если содержимое поменяет размер, нужно будет изменить размеры контейнера и фонового изображения.

Данная публикация представляет собой перевод статьи «How to Stretch a Background Image to Fit a Web Page» , подготовленной дружной командой проекта Интернет-технологии.ру

Как растянуть фон на весь экран?
Вот так не работает:

Картинка есть, но их несколько штук.

2,15444 золотых знака1616 серебряных знаков3131 бронзовый знак

задан 3 мар &#8217;16 в 15:13

4111 серебряный знак22 бронзовых знака

Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа).

– Nicolas Chabanovsky♦
14 мар &#8217;16 в 7:31

размеры width/height устанавливаются относительно родительского блока.

– dasauser
6 ноя &#8217;18 в 10:35

body <
background: url(//www.gravatar.com/avatar/cbfaff96665b7567defe1b34a883db8b?s=1024&d=identicon&r=PG) center no-repeat;
background-size: 100% 100%;
>

ответ дан 3 мар &#8217;16 в 15:26

101k2020 золотых знаков8787 серебряных знаков244244 бронзовых знака

Спасибо огромное. Но относится у меня к <body>.

– Zero
3 мар &#8217;16 в 15:52

@Zero, можно и для body.

– Qwertiy♦
3 мар &#8217;16 в 15:54

ответ дан 3 мар &#8217;16 в 15:53

1,03611 золотой знак1313 серебряных знаков3131 бронзовый знак

cover сохраняет пропорции.

– Qwertiy♦
3 мар &#8217;16 в 15:55

cover &#8212; заполняет ввесь фон картинкой.

– SkiesX
3 мар &#8217;16 в 15:58

Да. Но с сохранением пропорций. А то, что не поместится, просто исчезает. Растягивания картинки нет (хотя увеличение может быть) &#8212; я это имел в виду.

– Qwertiy♦
3 мар &#8217;16 в 16:03

я понял Вас, просто дописал что он еще и заполняет фон, то есть как человеку нужно было на ввесь экран поставить фон.

Картинка по размеру блока

Часто возникает необходимость растянуть картинку по размеру блока с сохранением пропорций, чтобы изображение не искажалось. При этом результат бывает нужен разный. Иногда нужно обязательно заполнить всё пространство блока. А иногда важно отобразить всю картинку. Для этого в CSS есть свойство object-fit . Оно может иметь такие значения:

object-fit: fill &#8212; картинка просто заполняет блок без сохранения пропорций (по умолчанию)

object-fit: cover &#8212; картинка полностью заполняет всё пространство блока. Края изображения могут быть обрезаны из за того, что форма блока не совпадает с формой картинки.

object-fit: contain &#8212; вся картинка отображается в блоке. Часть блока может быть не заполнена из за того, что форма блока не совпадает с формой картинки.

object-fit: none &#8212; картинка отображается в своём реальном масштабе

object-fit: scale-down &#8212; соответствует либо contain либо none . Из этих вариантов выбирает тот, который меньше.

object-fit: initial &#8212; возвращает значение по умолчанию, если ранее изображению было установлено другое значение

Растянуть и масштабировать изображение CSS в фоновом режиме-только с CSS

Я хочу, чтобы мое фоновое изображение растягивалось и масштабировалось в зависимости от размера окна просмотра браузера.

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

в этом АН img тег помещается, а затем с помощью CSS мы отдаем должное img тег.

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

есть ли хороший метод, чтобы сделать это с background-image декларации?

18 ответов

CSS3 имеет приятный маленький атрибут background-size:cover .

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

вы можете использовать свойство CSS3, чтобы сделать это довольно красиво. Он изменяет размер до соотношения, поэтому нет искажения изображения (хотя он делает высококлассные небольшие изображения). Просто обратите внимание, что он еще не реализован во всех браузерах.

С помощью код Я уже упоминал.

HTML-код
в CSS

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

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

С CSS 3 кажется, что это было бы намного проще.

растягивает bg, чтобы заполнить весь элемент на обеих осях

следующая часть CSS должна растягивать изображение со всеми браузерами.

Я делаю это динамически для каждой страницы. Поэтому я использую PHP для создания собственного HTML-тега для каждой страницы. Все фотографии находятся в папке "image" и заканчиваются на " Bg.в JPG&#8217;.

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

Это было протестировано с помощью Internet Explorer 9, Chrome 21 и Firefox 14.

используйте этот CSS:

вы можете достичь того же эффекта, что и фоновое изображение с тегом img. Вам просто нужно установить его z-индекс ниже, чем все остальное, установить position: absolute и использовать прозрачный фон для каждого окна на переднем плане.

Вы можете добавить этот класс в CSS-файл.

  • Safari 3 или более поздней версии
  • Chrome что угодно или позже
  • Internet Explorer 9 или позднее
  • Опера 10 или более поздней версии (Opera 9.5 поддерживается background-size , но не ключевые слова)
  • Firefox 3.6 или более поздней версии (Firefox 4 поддерживает версию без префикса поставщика)

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

Я использую это, и это работает со всеми браузерами:

Я согласен с изображением в абсолютном div со 100% шириной и высотой. Убедитесь, что вы установили 100% ширину и высоту для тела в CSS и установили поля и отступы на ноль. Еще одна проблема, с которой вы столкнетесь с этим методом, заключается в том, что при выборе текста область выбора иногда может включать фоновое изображение, что имеет неудачный эффект создания полной страницы с выбранным состоянием. Вы можете обойти это, используя user-select:none правило CSS, например:

снова, Internet Explorer-плохой парень здесь, потому что он не распознает опцию выбора пользователя-даже Internet Explorer 10 preview поддерживает его, поэтому у вас есть возможность использовать JavaScript для предотвращения выбора фонового изображения (например,http://www.felgall.com/jstip35.htm) или с помощью CSS 3 метод растяжения фона.

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

но тогда это не работало для Google Chrome и сафари &#8212; браузеры (растяжка работала, но высота фотографий была всего 2 мм!), пока кто-то не сказал мне, что нет:

попробуйте установить height:auto;min-height:100%;

так что измените это для своего height:100%; линии, дает:

непосредственно перед этим недавно добавленным кодом у меня есть это в моем Друпал тандю темы style.css :

тогда я должен сделать новый блок в Drupal с изображением при добавлении :

просто копирование изображения с редактором в этом блоке Drupal не работает; нужно изменить редактор к неформатированному тексту.

Я хотел центрировать и масштабировать фоновое изображение, не растягивая его на всю страницу, и я хотел, чтобы соотношение сторон поддерживалось. Это сработало для меня, благодаря вариациям, предложенным в других ответах:

использовать Бэкстретч плагин. Можно даже сделать несколько слайдов. Он также работает в контейнерах. Таким образом, например, можно было бы только часть фона была покрыта фоновым изображением.

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

можно использовать border-image : yourimage свойство для масштабирования изображения до границы, даже если вы даете фоновое изображение, то изображение границы будет нарисовано поверх него.

свойство border-image очень полезно, если ваша таблица стилей реализована где-то, что не поддерживает CSS3 . Если вы используете chrome firefox, то я рекомендую собственность.

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

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

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

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