Как сделать фон на всю страницу css
Изображение фона на весь экран с помощью CSS
Фоновое изображение на всю страницу бывает полезно, когда Вы создаете портфолио или фотогалерею на сайте. Обычно реализация подразумевает использование jQuery плагина, который будет менять размер изображения относительно окна браузера и делать необходимые расчеты, чтобы изображение заполняло всю ширину и высоту.
Но есть способ, жертвуя поддержкой IE8 и ниже, реализовать это всего лишь несколькими строчками CSS кода.
Свойство background-size
С помощью background-size можно масштабировать изображение по заданным размерам. Согласно документации этого свойства (ссылка на htmlbook) оно может принимать значения cover и contain .
- cover — Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
- contain — Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
Всё, что нам нужно установить фоновое изображения для HTML:
Готово! Теперь изображение отображается на весь экран, даже при изменении размера окна браузера. Работает так же в IE9+.
Фон, который всегда растягивается на всю страницу
Цель данного урока рассмотреть способы организации фонового изображения для веб сайта, которое будет всегда растягиваться на все окно браузера.
Подобный урок уже приводился на сайте RUSELLER.COM. Но с того момента прошло время и наступила пора обновить и расширить список используемых методов.
Вот требования к решению:
Заполнять изображением всю страницу без пробелов.
Масштабировать изображение, если нужно.
Сохранять пропорции изображения.
Изображение центрируется на странице.
Изображение не создает никаких полос прокрутки.
Кросс-браузерное решение по возможности.
Не использовать никаких сторонних технологий, например, Flash.
Удивительный, простой и прогрессивный метод CSS3
Задача легко решается с помощью CSS3 благодаря ставшему доступным свойству background-size .
Мы используем элемент html (лучше, чем body , так как он всегда имеет, по крайней мере, высоту окна браузера). Устанавливаем фиксированные и центрированный фон для него, а затем настраиваем размер с помощью присваивания свойству background-size ключевого слова cover.
Opera 10+ (Opera 9.5 поддерживает свойство background-size, но без ключевых слов)
Техника с использованием только CSS. Часть #1.
Используем строчный элемент <img> , размеры которого можно менять в любом браузере. Устанавливаем свойство min-height , чтобы заполнить окно браузера вертикально, а свойству width присваиваем значение 100% для заполнения по горизонтали. Также устанавливаем свойство min-width равным ширине изображения, чтобы никогда оно не уменьшалось.
Хитрый ход заключается в использовании медиа запроса для проверки того, что ширина окна браузера меньше ширины изображения, и использование комбинации процентного значения свойства left и отрицательного значения для левого поля, чтобы центрировать фоновое изображение.
Любой версии нормального браузера: Safari / Chrome / Opera / Firefox.
IE 6: Не работает — но можно использовать какой-нибудь из трюков для позиционирования.
IE 7/8: В большинстве случаев работает, не центрирует маленькие изображения, но заполняет экран правильно.
Техника с использованием только CSS. Часть #2.
Другой способ решить задачу — поместить строчный элемент <img> на странице, зафиксировать его положение в левом верхнем углу и установить значение 100% для его свойств min-width и min-height , сохраняя коэффициент пропорциональности.
Однако так изображение не центрируется. Поэтому обернем изображение в элемент <div> . Данный <div> будет иметь ширину в два раза больше окна браузера. Изображение, помещенное в него, будет сохранять пропорции и полностью покрывать окно браузера, размещаясь точно в центре.
Safari / Chrome / Firefox (не тестировалось на всех версиях, но в последних работает прекрасно).
Opera (любая версия) и IE отказываются работать с данным способом (неправильное позиционирование изображения).
Используем jQuery
Идея очень проста, если коэффициент пропорциональности изображения (строчный элемент <img> будет использоваться как фон) сопоставляется с коэффициентом пропорциональности окна браузера. Если для изображения он меньше, то нужно присвоить только свойству изображения width значение 100%, и оно будет заполнять экран и по высоте и по ширине. А если больше, то присвоить только свойству изображения height значение 100%.
IE7+ (с заглушками, вероятно, будет работать и в IE6)
Во всех остальных браузерах.
Заключение
Любой из методов решения имеет свои достоинства и недостатки. Нужно просто выбрать подходящее для конкретного случая. Ну, или предложить свое.
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: css-tricks.com/perfect-full-page-background-image/
Перевел: Сергей Фастунов
Урок создан: 14 Декабря 2010
Просмотров: 130398
Правила перепечатки
5 последних уроков рубрики «CSS»
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
Как сделать фоновую картинку на всю ширину?
Для изменения размеров фоновой картинки используется свойство background-size. Значение 100% масштабирует изображение на всю доступную ширину, при этом высота будет задана автоматически, исходя из пропорций картинки (пример 1).
Пример 1. Использование background-size
Результат данного примера показан на рис. 1. Обратите внимание, что по умолчанию картинка повторяется по вертикали. Если повторение запретить через background-repeat, то фоновая картинка будет занимать лишь часть веб-страницы.
Рис. 1. Фоновая картинка на всю ширину веб-страницы
Часто также требуется ограничить высоту фона фиксированным значением, а ширину оставить 100%. Для этого используем свойство height для указания высоты, а для background-size пишем значение cover (пример 2).
size | HTML и CSS с примерами кода
Свойство background-size масштабирует фоновое изображение, согласно заданным размерам.
- background
- background-attachment
- background-blend-mode
- background-clip
- background-color
- background-image
- background-origin
- background-position
- background-position-x
- background-position-y
- background-repeat
- background-size
Синтаксис
/* Keyword values */ background-size: cover; background-size: contain; /* One-value syntax */ /* the width of the image (height becomes 'auto') */ background-size: 50%; background-size: 3.2em; background-size: 12px; background-size: auto; /* Two-value syntax */ /* first value: width of the image, second value: height */ background-size: 50% auto; background-size: 3em 25%; background-size: auto 6px; background-size: auto auto; /* Multiple backgrounds */ background-size: auto, auto; /* Not to be confused with `auto auto` */ background-size: 50%, 25%, 25%; background-size: 6px, auto, contain; /* Global values */ background-size: inherit; background-size: initial; background-size: unset;
Значения
<размер>- Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>- Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно устанавливает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задаёт ширину и высоту фоновой картинки.
Значение по-умолчанию:
background-size: auto;
Применяется ко всем элементам
Спецификации
- CSS Backgrounds and Borders Module Level 3
Поддержка браузерами
Can I Use background-img-opts? Data on support for the background-img-opts feature across the major browsers from caniuse.com.
Описание и примеры
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>background-size</title>
<style>
div {
height: 200px; /* Высота блока */
border: 2px solid #000; /* Параметры рамки */
background: url('/example/image/mybg.
png') 100% 100%
no-repeat; /* Добавляем фон */
background-size: cover; /* Масштабируем фон */
}
</style>
</head>
<body>
<div>...</div>
</body>
</html>
css размер фонового изображения | Фрагменты кода
Главная » Фрагменты кода » css background image size
Если вы хотите разместить любое изображение в качестве фона, это довольно просто. Если вы хотите сфокусироваться на какой-то точке изображения, которая немного усложняет код CSS. Если вы хотите манипулировать размером, это более сложно. Учитывая, что ни одно изображение не может соответствовать всем размерам экрана.
Рассмотрим случай изменения размера фонового изображения в теле (во весь экран) и внутри контейнера.
Чтобы понять размеры, мы всегда будем брать положение изображения в качестве центра. Это можно изменить в зависимости от изображения.
Установка размера фона в полноэкранном окне.
Мы сделаем тело на 100%, чтобы можно было использовать изображение.
Вот как выглядит базовый HTML:
<голова> <тело>
Часть стиля будет содержать HTML и основной текст, а также фоновое изображение с центральным положением и без повторов:
HTML, тело {
высота: 100%;
маржа: 0;
заполнение: 0;
}
тело{
фон: url(earhy-lady.jpg) центр без повторов;
} Это просто выведет изображение в теле. Не очень убедительно, верно?
Пример редактирования
Это связано с тем, что фоновое изображение имеет масштаб по умолчанию. Мы можем захотеть изменить его размер, чтобы он выглядел хорошо, по крайней мере, на рабочем столе. Вот как это выглядит после использования размера фона.
/* Изображение будет увеличено до полной ширины */
тело{
размер фона: обложка;
}
Редактировать пример
Мы можем подогнать его под высоту, изменив код следующим образом:
/* Это изменит размер изображения до полной высоты */
тело{
размер фона: содержит;
} Пример редактирования
Использование полноразмерных или полноразмерных изображений не является идеальным.
Это идеально подходит для фоновых изображений, где можно обрезать изображение в некоторых точках.
Мы можем установить свойство background-position в то место, где мы хотим установить фокус при изменении размера области просмотра.
Фиксированный и процентный размер фонового изображения:
Фоновый размер может иметь фиксированный или процентный размер. Это позволит растянуть изображение. Любите это, ненавидьте это, есть метод, чтобы нарушить соотношение сторон, если вы хотите его использовать. Это не всегда хорошо выглядит.
Мы просто попробуем управлять шириной фона, чтобы продемонстрировать, как это работает. Это нарушит соотношение сторон.
/* Это изменит размер изображения на 400 пикселей по оси x и на 200 пикселей по оси y */
тело{
размер фона: 400 пикселей 200 пикселей;
} Пример редактирования
Это можно сделать как по оси X, так и по оси Y.
/* Это изменит размер изображения на 400 пикселей по оси Y и на 200 пикселей по оси X */
тело{
размер фона: 200 пикселей 400 пикселей;
} Пример редактирования
Что, если мы хотим изменить размер фонового изображения внутри контейнера?
Все методы, которые применимы к телу, глобально применимы для любого элемента, например набора логотипов.
Возможно, нам придется использовать размер в процентах, чтобы изображения, такие как логотипы, не обрезались из-за размера фона.
Основное правило изменения размера изображения выглядит так:
/* Настройка базовой сетки */
.logo-контейнер{
дисплей: сетка;
сетка-столбец-шаблон: 1fr 1fr;
зазор сетки: 10px;
}
.лого{
размер фона: авто 70%;
} Этот размер подойдет, учитывая, что большинство логотипов имеют прямоугольное соотношение. Лужи с портретным размером будут обрезаны из-за размера в направлении x.
Пример редактирования
Для большего количества портретных изображений нам просто нужно использовать лучший размер фона. Высота будет больше 70%, чтобы в поле было полное изображение.
.лого{
размер фона: 70% авто;
} Это приведет к следующему результату.
Пример редактирования
Фото Саджада Нори, Омида Армина на Unsplash
https://unsplash.com/photos/ceoOtd3U5zs
https://unsplash.com/photos/_8rh7LPA4mE
Подойдут ли эти размеры для адаптивных макетов?
ответ зависит.
Фоновое изображение не сохраняет настройки размера — Баги — Форум
драм (Алекс Драм)
#1
Еще раз привет, @Brando, @cyberdave
- создать div, дать ему фоновое изображение, настроить его так, чтобы он содержал или закрывал
- установить div на
display: none - установить его обратно в блок
- размер фонового изображения сбрасывается
На всякий случай видео указанной проблемы.
ps: не обращайте внимания на то, что желтые накладки Flux сходят с ума
avivtech (Авив Шварц)
#2
У меня такая же проблема.
Каждое изменение блока автоматически меняет его фоновое изображение на положение по умолчанию, без обложки.
драм (Алекс Драм)
#3
Да, я могу постоянно воспроизводить это поведение в каждом проекте, поэтому я не беспокоился о ссылках только для чтения. Похоже на недавнюю ошибку, не могу вспомнить, что подобное происходило раньше.
Еще проблема в том, что крышка и содержащие кнопки ведут себя хаотично (последний хром). Вот. Нажатие на кнопки непоследовательно и занимает около 2-3 кликов, чтобы фактически переключиться. При этом фоновое изображение отражает изменение с первого клика, даже если интерфейс этого не показывает.
Он кажется сломанным, и мне не нравится, что мой Webflow сломан
1 Нравится
Нита (Соня Алвес)
#4
Привет @dram и @avivtech,
Спасибо, что написали об этом.
Это известная проблема, и команда в настоящее время занимается ее расследованием. Как только у нас будет больше подробностей, я немедленно дам вам знать.
Заранее спасибо за терпение.
3 нравится
динко (Динко Ибукич)
#6
Наша команда столкнулась с похожей проблемой: фоновые изображения не сохраняют свой размер.
Запуск последней версии Chrome на Win 10.
adiggy (А)
#7
Я тоже. Следующий.
Фернандолинс (Фернандо Линс)
#8
Здесь же.
Каждый раз, когда я открываю панель фонового изображения, настройки сбрасываются.
Люкс (Люк Дорни)
#9
Приятно знать, что @webflow на связи, @Nita! Тоже с этой проблемой. Стили, которые, кажется, влияют на это для меня:
- Установка границ/цветов
- Настройка цвета текста
- Изменение настроек фона Обложка/Содержимое
И особенно (для меня), когда эти настройки находятся в элементе тега Anchor, когда это Link Block .
Я предполагаю, что это связано с настройками стилей привязки в различных итерациях дизайна и скомпилированным CSS, каждый раз генерируемым по-разному.
Отмена исправляет это для меня, но повторные изменения вызывают проблему каждый раз снова и снова.
Не объединять эту проблему, добавляя другую проблему, но, вероятно, она связана с нажатием кнопки в палитрах, поэтому я добавляю ее: я уже давно заметил, что нажатие на цвет иногда не меняет его, если вы не выберете другой образец цвета, а затем снова нажмите на нужный цвет.
Брандо (Брэндон Роше)
#10
Привет @Lux @fernando1lins @adiggy @dinko @dram @avivtech
Еще раз спасибо за сообщение об этой проблеме с фоновым изображением.
Я хотел бы кратко рассказать вам о нашем прогрессе — команда смогла определить основную причину проблемы, и в настоящее время мы работаем над ее устранением.
В ближайшее время мы сможем развернуть это исправление и обязательно сообщим вам, когда оно будет запущено.
Заранее спасибо за вашу помощь и терпение.
3 нравится
Svarte_Peter_J_Barte (Сварте Питер Дж. Бартель)
#11
У меня такая же проблема. Это не просто фоновое изображение, которое было дурацким последние пару недель. Одна вещь, которая меня очень разочаровывала, это то, что параметр переполнения возвращался к значению по умолчанию каждый раз, когда я что-то меняю в классе.
Брандо (Брэндон Роше)
#12
Привет, @Svarte_Peter_J_Barte
Наша команда смогла исправить эту проблему с переполнением.
Не могли бы вы попробовать выйти из системы, полностью закрыть браузер, а затем снова войти в систему и посмотреть, сохраняется ли проблема?
Заранее спасибо.
Брандо (Брэндон Роше)
№13
Привет @Lux @fernando1lins @adiggy @dinko @dram @avivtech
Хорошие новости — прямо сейчас внедряется исправление для проблемы с фоновым изображением!
Исправление должно появиться в ближайшие пару часов, и быстрое обновление конструктора должно дать вам это обновление.
@allykat87 Я объединил вашу тему с существующей веткой
2 нравится
алликат87 (Натали Руссо)
№14
Мой сайт внезапно перестал сохранять настройки фона «обложка» или «содержать». Как только я редактирую другую часть фона — положение или цвет фона — он отменяется. У кого-нибудь еще есть эти проблемы?
https://drive.google.com/open?id=1KM_lew54iJ81Dl1NYgBwj8m1qqTG6Dvw
адги (А)
№15
Эй, Элли! Да, я сам столкнулся с этой проблемой. Судя по этому посту, они решили это 3 часа назад?
(сам пока не пробовал, так что не знаю точно исправили ли.)
allykat87 (Натали Руссо)
№16
@adiggy Вздох — к сожалению, мой до сих пор этим занимается.
Пробовал очищать кеш и все
драм (Алекс Драм)
# 17
Еще не исправлено. Команда работает над этим, так что, надеюсь, ненадолго.
1 Нравится
(Фернандо Линс)
# 19
Большое спасибо за обновление
1 Нравится
система (система) закрыто
