Растянуть фон всю страницу css

Как изменить размер фонового изображения с помощью CSS3

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

Здесь можете найти разные методы:

Абсолютное изменение размера

Когда мы устанавливаем фоновое изображение, ширина и высота изображения по умолчанию устанавливаются в «auto», которое сохраняет оригинальный размер изображения. А если необходимо изменить размер изображения, могут быть использованы абсолютные измерения для установления нового размера (px, em, cm и др).

Измерения высоты могут быть применены, используя свойство background-size с абсолютным измерением.

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

Давайте рассмотрим пример фонового изображения с измененным размером:

Пример

html> html> head> title>Фоновое изображение с измененным размером title> style> .resized < width: 400px; height: 300px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 300px 200px; background-repeat: no-repeat; border: 1px solid #999; > style> head> body> h2>Фоновое изображение с измененным размером h2> div class="resized"> div> body> html>

Относительное изменение размера с помощью процентов

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

Пример

html> html> head> title>Фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: 100% 100%; background-repeat: no-repeat; border: 2px solid #999; > style> head> body> h2>Фоновое изображение с измененным размером h2> div class="resized"> div> body> html>

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

Максимальное масштабирование размера

Когда свойство background-size установлено в значение «contain», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло область контента. Но пропорции изображения (отношение высоты и ширины) будут сохранены.

Значение «contain» указывает, что фоновое изображение будет масштабировано независимо от размера контейнера таким образом, что каждая сторона была максимально больше, не переходя длину контейнера с соответствующей стороны.

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

Пример

html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-repeat: no-repeat; background-size: contain; border: 1px solid #999; > style> head> body> h2>Адаптивное фоновое изображение с измененным размером h2> p>Измените размер браузера и увидите результат: p> div class="resized"> div> body> html>

Заполнение фоном

Когда свойство background-size установлено в значение «cover», фоновое изображение будет масштабировано таким образом, чтобы оно заполняло всю область контента. Изображение будет масштабировано, чтобы заполнить контентную область, но оно будет обрезано, если соотношения сторон различаются.

Пример

html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> .resized < width: 100%; height: 400px; background-image: url("/uploads/media/default/0001/01/b408569013c0bb32b2afb0f0d45e93e982347951.jpeg"); background-size: cover; border: 1px solid #999; > style> head> body> h2>Адаптивное фоновое изображение с измененным размером h2> p>Измените размер браузера и увидите результат: p> div class="resized"> div> body> html>

Установление разных фонов для разных устройств

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

Можно использовать мультимедийные запросы для отображения разных изображений на разных устройствах.

Здесь используется правило @media. В данном примере можно увидеть одно большое изображение и другое поменьше. Они установлены так, чтобы быть отображены по-разному на разных устройствах. Вы увидите результат сами если измените ширину браузера.

Пример

html> html> head> title>Адаптивное фоновое изображение с измененным размером title> style> /* For width smaller than 400px: */ body < background-repeat: no-repeat; background-image: url("/uploads/media/default/0001/01/25acddb3da54207bc6beb5838f65f022feaa81d7.jpeg"); > /* For width 400px and larger: */ @media only screen and (min-width: 400px) < body < background-image: url("/uploads/media/default/0001/03/6514e37cd15dbe1bca3e3b961baa3a19e2283dc3.jpeg"); > > style> head> body> p style="margin-top:220px;">Измените ширину браузера, и фоновое изображение изменится при 400px. p> body> html>

Источник

Фон, который всегда растягивается на всю страницу

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

Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.

• Заполнять изображением всю страницу без пробелов.
• Масштабировать изображение, если нужно.
• Сохранять пропорции изображения.
• Изображение центрируется на странице.
• Изображение не создает никаких полос прокрутки.
• Кросс-браузерное решение по возможности.
• Не использовать никаких сторонних технологий, например, Flash.

Удивительный, простой и прогрессивный метод CSS3

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

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

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

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

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

img.bg < /* Устанавливаем правила для заполнения фоном */ min-height: 100%; min-width: 1024px; /* Устанавливаем коэффициент пропорциональности */ width: 100%; height: auto; /* Устанавливаем позиционирование */ position: fixed; top: 0; left: 0; >@media screen and (max-width: 1024px) < /* Определяется свое для каждого конкретного изображения */ img.bg < left: 50%; margin-left: -512px; /* 50% */ >>

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

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

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

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

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

Используем jQuery

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

$(function() < var theWindow = $(window), $bg = $("#bg"), aspectRatio = $bg.width() / $bg.height(); function resizeBg() < if ( (theWindow.width() / theWindow.height()) < aspectRatio ) < $bg .removeClass() .addClass('bgheight'); >else < $bg .removeClass() .addClass('bgwidth'); >> theWindow.resize(function() < resizeBg(); >).trigger("resize"); >);

Заключение

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/perfect-full-page-background-image/
Перевел: Сергей Фастунов
Урок создан: 14 Декабря 2010
Просмотров: 135908
Правила перепечатки

5 последних уроков рубрики «CSS»

• 

Забавные эффекты для букв

Реализация забавных подсказок

Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.

Анимированные буквы

Солнцезащитные очки от первого лица

Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.

Источник

Как растянуть картинку на весь экран css?

Чтобы растянуть картинку на весь экран с помощью CSS, вы можете использовать следующий код:

img  width: 100%; height: 100%; > 

Этот код устанавливает ширину и высоту картинки равными 100%, что означает, что она будет занимать всю доступную ширину и высоту родительского элемента.

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

html, body  width: 100%; height: 100%; margin: 0; padding: 0; > img  width: 100%; height: 100%; > 

Этот код устанавливает ширину и высоту html и body равными 100%, а также убирает верхний и левый отступы (margin), чтобы картинка занимала все доступное пространство.

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

html, body  width: 100%; height: 100%; margin: 0; padding: 0; > img  width: 100%; height: auto; object-fit: cover; > 

Этот код устанавливает атрибут object-fit равным cover , что означает, что картинка будет обрезана, чтобы полностью заполнить доступное пространство, но при этом оставаться пропорциональной.

Нужно понимать, что этот код работает только в современных браузерах, поддерживающих атрибут object-fit . Если вы хотите, чтобы ваш код работал во всех браузерах, вы можете использовать JavaScript для реализации такого поведения.

Источник

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

Растянуть фоновую картинку на всю ширину окна браузера с помощью CSS3.

Решение

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

Пример 1. Растягиваемый фон

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 1.

Рис. 1. Вид фона при уменьшенном размере окна

При увеличении размера окна браузера фон также начнёт расширяться, это приведет к ухудшению вида картинки (рис. 2).

Рис. 2. Вид фона при увеличенном размере окна

CSS по теме

Статьи по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Источник