background-size | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 9.5+ | 3.0+ | 3.6+ | 2.1+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Масштабирует фоновое изображение согласно заданным размерам.
Синтаксис
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
Значения
- <значение>
- Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
- <проценты>
- Задает размер фоновой картинки в процентах от ширины или высоты элемента.
- auto
- Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
- cover
- Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
- contain
- Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>background-size</title>
<style>
div {
height: 200px; /* Высота блока */
border: 2px solid #000; /* Параметры рамки */
background: url(images/mybg.png) 100% 100% no-repeat; /* Добавляем фон */
background-size: cover; /* Масштабируем фон */
}
</style>
</head>
<body>
<div>...</div>
</body>
</html>Браузеры
Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size.
Opera до версии 10.53 использует нестандартное свойство -o-background-size.
Firefox до версии 4.0 использует нестандартное свойство -moz-background-size.
Html div background image — Вэб-шпаргалка для интернет предпринимателей!
При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в CSS?
Работа с фоном в CSS
С помощью свойства background можно задать положение, цвет, изображение, повторяемость и привязку фона, как для отдельных элементов, так и полностью для всего сайта, что по своей сути, кстати, является заданием определённых настроек для тега . Рассмотрим все свойства, которые связаны с заданием фона.
background-color
Задаёт цвет фона. Его можно применять как к отдельным элементам
, так и ко всему веб-сайту с помощью тега .
background-image
Данное свойство используется для вставки фоновой картинки, указывая при этом ссылку на неё.
Обратите внимание на то, как указан путь к картинке. Это значит, что изображение должно находиться в той же директории, что и файл стилей CSS. Иначе придётся указывать полный путь к файлу.
background-repeat
Изображение из предыдущего примера будет повторяться по всему экрану благодаря данному свойству.
Оно может иметь несколько значений:
- background-repeat: repeat-x — повторение по горизонтали;
- background-repeat: repeat-y — повторение по вертикали;
- background-repeat: repeat — повторение и по горизонтали и по вертикали;
- background-repeat: no-repeat — изображение не повторяется.
Например, повторение по горизонтали выглядит так:
background-attachment
Это свойство определяет фиксирование фонового изображения при скроллинге:
- background-attachment: scroll — фон прокручивается вместе со страницей;
- background-attachment: fixed — фон остаётся неподвижным.
background-position
Данное свойство определяет расположение фоновой картинки относительно экрана. Значения свойства представляют собой набор вертикальных и горизонтальных координат, отсчет которых начинается с верхнего левого угла.
Свойство может задаваться в процентном формате, в пикселях, сантиметрах или словесно: top, bottom, center, right, left .
- background-position: 50% 20% — изображение располагается по центру по горизонтали и на 20% отступает сверху;
- background-position: 80px 60px — отступ изображения вниз на 80 пикселей от верхнего края и на 60 пикселей вправо от левого:
gradient
Плавный переход от одного цвета к другому, причем переходов допускается несколько.
Использование градиента можно наглядно продемонстрировать в примере кода:
Все приведённые настройки можно сделать в одном свойстве background, записав их в перечисленном порядке.
Если пропустить какое-либо свойство, для него устанавливается значение по умолчанию.
Работа с размером фона в CSS
В CSS 2.1 фоновая картинка сохраняет фиксированный размер, однако в CSS 3 было введено подсвойство size, благодаря которому фоновое изображение может быть растянуто или сжато.
Существует несколько способов, позволяющих определить размер:
Абсолютное изменение размера
Ширина и высота по умолчанию устанавливаются автоматически, а новый размер можно задать с помощью различных единиц измерения.
Например, если исходное изображение имеет разрешение 300 на 300 пикселей, то такой код сделает его ширину в два раза меньше:
Если указано только одно значение, оно по умолчанию считается как ширина, высота определяется автоматически, и пропорции сохраняются.
Код, который масштабирует картинку до размера 100 на 100 пикселей, выглядит так:
Относительное изменение размера
Если применять проценты, размер будет основываться не на изображении, а на элементе.
То есть, ширина фонового изображения зависит от параметров контейнера. Если ширина контейнера составляет 600 пикселей, размер фонового изображения уменьшится до величины 300 на 300 пикселей.
Как показывает практика, использование процентов весьма полезно для адаптивного дизайна.
Масштабирование до максимального размера
В свойстве background-size значение contain масштабирует фоновое изображение так, чтобы оно полностью заполняло контейнер или всю страницу.
Уменьшение или увеличение происходит пропорционально до тех пор, пока высота или ширина не будет выходить за рамки контейнера.
Такой фон страницы будет автоматически подгоняться под любое разрешение:
Заполнение фоном
Используя в свойстве background-size значение cover, фон масштабируется таким образом, чтобы заполнить всё пространство контейнера.
В том случае, если соотношения сторон различаются, картинка обрежется:
Масштабирование сразу нескольких фонов
Они могут быть масштабированы при помощи списка значений, которые разделены запятыми в том же порядке:
Создание полупрозрачного фона в CSS
Полупрозрачный элемент хорошо заметен на фоновом рисунке. В веб-дизайне полупрозрачность достигается за счёт свойства opacity или задаваемого для фона формата цвета RGBA.
Особенность данного свойства заключается в том, что прозрачность действует не только на фон, но и на все дочерние элементы. После увеличения прозрачности, и текст и фон станут полупрозрачными.
Пример создания полупрозрачного блока:
Однако достаточно часто полупрозрачным должен быть только фон определённого элемента, а текст оставаться непрозрачным для читабельности.
В таком случае opacity не подходит и следует воспользоваться форматом RGBA, в котором помимо значений яркости синего, красного и зелёного цветов устанавливается ещё и значение прозрачности. 1 означает абсолютную непрозрачность, а 0 — полную прозрачность.
Пример задания прозрачного фона:
Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!
Каждый блок html-элемента имеет фоновый слой, который может быть полностью прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими изображениями. CSS-свойства фона указывают, какой цвет background-color и изображения background-image использовать, а также их размер, расположение, способ укладки и т.д.
Свойства фона не наследуются, но фон родительского блока будет просвечивать по умолчанию из-за начального значения в background-color: transparent .
Фон не отображается у пустых элементов с нулевой высотой. Отрицательные значения свойства margin не влияют на фон элемента.
Свойства фона html-элементов
- Содержание:
- 1. Базовый цвет: свойство background-color
- 2. Источник изображения: свойство background-image
- 3. Укладка изображений: свойство background-repeat
- 4. Фиксация изображения: свойство background-attachment
- 5. Позиционирование изображений: свойство background-position
- 6. Область рисования: свойство background-clip
- 7. Область расположения фона: свойство background-origin
- 8. Размер изображений: свойство background-size
- 9. Краткая запись свойств фона: свойство background
- 10. Множественные фоны
1. Базовый цвет: свойство background-color
Свойство background-color устанавливает цвет фона элемента. Цвет рисуется за фоновыми изображениями. Для блочных элементов цвет фона распространяется на всю ширину и высоту блока элемента, для строчных — только на область их содержимого.
Цвет фона обрезается в соответствии со значением background-clip самого нижнего слоя фонового изображения.
Свойство не наследуется.
| background-color | |
|---|---|
| Значения: | |
| цвет | Значение принимает все форматы цвета свойства color. Значение по умолчанию transparent . |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 1. Свойство background-color для разных элементов
2. Источник изображения: свойство background-image
Свойство background-image устанавливает фоновое изображение (одно или несколько) элемента. Значение none считается слоем изображения, но ничего не рисует. Изображение, которое является пустым (нулевой ширины или нулевой высоты), которое не загружается или не может быть отображено (например, потому что оно не в поддерживаемом формате изображения) также считается слоем, но ничего не рисует.
Семантически важные изображения должны предоставляться в разметке документа, например, с тегом .
Свойство не наследуется.
| background-image | |
|---|---|
| Значения: | |
| изображение | Обозначает 2D-изображение. Это может быть ссылка на URL, нотация image() или запись градиента. Значение по умолчанию none . |
| inherit | Наследует значение свойства от родительского элемента. |
3. Укладка изображений: свойство background-repeat
Свойство background-repeat определяет, как фоновые изображения укладываются в области фона после того, как для них установлены размеры и позиционирование. Если значение свойства имеет два ключевых слова, первое используется для горизонтального направления, второе — для вертикального.
Свойство не наследуется.
| background-repeat | |
|---|---|
| Значения: | |
| repeat-x | Изображение повторяется в горизонтальном направлении. Вычисляется в repeat no-repeat . |
| repeat-y | Изображение повторяется в вертикальном направлении. Вычисляется в no-repeat repeat . |
| repeat | Изображение повторяется в обоих направлениях так часто, чтобы покрыть область отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется в repeat repeat . Значение по умолчанию. |
| space | Изображение повторяется столько раз, сколько оно помещается в области фона, не обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и последнее изображения касаются краев области. Если область рисования фона больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить область рисования фона. Если недостаточно места для двух копий изображения, то размещается только одно изображение, а свойство background-position определяет его положение. Вычисляется в space space . |
| round | Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь и не обрезаясь. Вычисляется в round round . |
| no-repeat | Изображение размещается один раз и не повторяется. Вычисляется в no-repeat no-repea t. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 2. Свойство background-repeat
4. Фиксация изображения: свойство background-attachment
Свойство background-attachment указывает, является ли фоновое изображение фиксированными относительно области просмотра или прокручивается вместе с элементом или его содержимым.
Свойство не наследуется.
| background-attachment | |
|---|---|
| Значения: | |
| scroll | Фоновое изображение прокручивается вместе с текстом и другим содержимым. Значение по умолчанию. |
| fixed | Предотвращает перемещение, фиксирует фоновое изображение на заднем плане. |
| local | Фоновое изображение прокручивается вместе с содержимым элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
5. Позиционирование изображений: свойство background-position
Если для элемента заданы фоновые изображения, свойство background-position указывает их начальное положение (после любого изменения размера) в соответствующей области расположения фона.
Свойство не наследуется.
| background-position | |
|---|---|
| Значения: | |
| % | Горизонтальное смещение вычисляется по формуле ширина области расположения фона — ширина фонового изображения. Вертикальное смещение по формуле высота области расположения фона — высота фонового изображения , где размер изображения — это размер, заданный свойством background-size . Значение по умолчанию 0% 0% . |
| длина | Значение длины дает фиксированную длину в качестве смещения. |
| left | Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно левого края. |
| center | Вычисляет в left 50% для горизонтального положения, если не указано иное горизонтальное положение, или как top 50% для вертикального положения, если оно задано. |
| right | Вычисляет в 100% для горизонтального положения, если задано одно или два значения, в противном случае смещение происходит относительно правого края. |
| top | Вычисляет в 0% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно верхнего края. |
| bottom | Вычисляет в 100% для вертикальной позиции, если задано одно или два значения, в противном случае смещение происходит относительно нижнего края. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Если указано только одно значение, второе значение считается center . Если заданы два значения в единицах длины или % , то первое значения представляет горизонтальную позицию, второе — вертикальную. Значения в единицах длины или % представляют смещение верхнего левого угла фонового изображения от верхнего левого угла области расположения фона.
Пара ключевых слов может быть переупорядочена, в то время как комбинация ключевого слова и длины или процента не может. Например, center left — допустимое значение, а 50% left — нет.
Если заданы три или четыре значения в единицах длины или % , то перед каждым значением должно стоять ключевое слово, которое указывает, от какого края дается смещение. Если даны три значения, недостающее смещение считается равным нулю.
Положительные значения смещают внутрь от края области расположения фона. Отрицательные значения смещают наружу от края области расположения фона.
Рис. 3. Свойство background-position
Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
Рис. 4. Фоновое изображение по низу блока
Также благодаря свойству позиционирования, для одного блока можно использовать несколько фоновых изображений:
Рис. 5. Задание для блока нескольких фоновых изображений
6. Область рисования: свойство background-clip
Свойство background-clip определяет область рисования фона. Фон всегда рисуется под рамкой элемента, если таковая имеется.
Корневой элемент имеет другую область рисования фона, поэтому свойство background-clip на него не влияет.
Свойство не наследуется.
| background-clip | |
|---|---|
| Значения: | |
| border-box | Фон закрашивает область в пределах рамки элемента. Значение по умолчанию. |
| padding-box | Фон закрашивает область в пределах внутренних полей элемента. |
| content-box | Фон закрашивает только область содержимого. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 6. Свойство background-clip
7. Область расположения фона: свойство background-origin
Свойство background-origin указывает область расположения фона для элементов, которые выводятся на экране как единый блок (например, не абзацы текста).
Свойство не наследуется.
| background-origin | |
|---|---|
| Значения: | |
| padding-box | Фон позиционируется относительно верхних границ области внутренних полей элемента. Значение по умолчанию. |
| border-box | Фон позиционируется относительно верхних границ рамки элемента. |
| content-box | Фон позиционируется относительно верхних границ области содержимого элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Если для элемента установлено background-attachment: fixed , свойство не будет иметь эффекта.
Если для элемента заданы background-clip: padding-box , background-origin: border-box , background-position: top left , и элемент имеет ненулевую рамку, тогда верхняя и левая части фонового изображения будет обрезаны.
Рис. 7. Свойство background-origin
8. Размер изображений: свойство background-size
Свойство background-size устанавливает размер фоновых изображений.
Свойство не наследуется.
| background-size | |
|---|---|
| Значения: | |
| auto | Значение по умолчанию. Высота и ширина изображения равны его оригинальным размерам. |
| длина | Размер задается парой значений, первое значение устанавливает ширину изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с текстом, размеры изображения нужно задавать в em . |
| % | Задает размер фонового изображения в процентах от ширины или высоты элемента, которое заполняется фоном. |
| cover | Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. |
| contain | Масштабирует изображение с сохранением пропорций таким образом, чтобы оно целиком поместилось внутри блока. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Рис. 8. Свойство background-size
9. Краткая запись свойств фона: свойство background
Свойство background позволяет описать в одном объявлении следующие свойства фона: background-color , background-image , background-position , background-size , background-repeat , background-origin , background-clip и background-attachment . Необязательно указывать все перечисленные свойства, если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.
Если вы указываете в краткой записи фона свойство background-size , то его значения нужно будет записать через слеш / , чтобы отделить его от свойства background-position .
10. Множественные фоны
Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев определяется количеством значений, разделенных запятыми, указанных в свойстве background-image . Значение none по-прежнему создает слой.
Первое изображение в списке — это слой, отображаемый ближайший к пользователю, следующий отрисовывается за первым, и так далее. Цвет фона, если он есть, закрашивается под всеми остальными слоями.
Рис. 9. Пример использования нескольких фоновых изображений
Приветствую. В этой статье я хочу рассказать о трех способах размещения изображения в качестве фона всей страницы при помощи только 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 для выравнивания бэкграунда по центру.
Этот способ работает в:
- Любой версии хороших браузеров (Chrome, Opera, Firefox, Safari)
- IE 9+
Способ 3
Еще один способ заключается в следующем: фиксируем изображение к левому верхнему углу страницы и растягиваем его при помощи свойств min-width и min-height 100%, сохраняя при этом соотношение сторон.
Правда при таком подходе картинка не центрируется. Но эта проблема решается заворачиванием картинки в
Этот способ работает в хороших браузерах и IE 8+.
Надеюсь, эта информация будет для Вас полезной. Лично я частенько пользуюсь этими методами, особенно первым. Наверняка есть и другие способы поместить изображение на задний фон при помощи CSS. Если Вы о них знаете, поделитесь, пожалуйста, комментариях.
Рекомендуем к прочтению
Адаптирующиеся картинки-заставки на CSS — CSS-LIVE
Перевод статьи Flexible CSS cover images с сайта nicolasgallagher.com, c разрешения автора — Николаса Галахера.
Недавно я подключил к своим постам возможность добавления больших картинок-заставок, как показано выше. Исходное изображение обрезано, и до определенного максимального размера отображается в заданной пропорции. В этой статье описывается реализация этого способа.
Поддержка браузерами: Chrome, Firefox, Safari, Opera, IE 9+
Функции
Способ, который масштабирует картинки-заставки и изменяет соотношение сторон, иллюстрирован на следующей диаграмме:
Элемент картинки-заставки должен уметь:
- отображать фиксированное соотношение сторон, до тех пор, пока их конкретные максимальные размеры превышены;
- поддерживать различные пропорции;
- поддерживать свойства
max-heightиmax-width; - поддерживать разные фоновые картинки;
- отобразить изображение так, чтобы оно либо полностью заполняло компонент, либо целиком помещалось в нем;
- центрировать изображение;
Соотношение сторон
Соотношение сторон пустого, блочного элемента может управляться с помощью установки в процентное значение его свойств padding-bottom или padding-top. Данное объявление (без какого-либо явного height), преобразует высоту элемента в 50% от его ширины.
.CoverImage {
padding-bottom: 50%;
}
Изменения значения такого padding’a изменит и соотношение сторон. Например, результатом padding-а в 25% будет пропорция 4:1, padding в 33.333% в 3:1 соответственно, и т.д.
Максимальные размеры
Проблема с использованием этого трюка/хака для пропорций состоит в том, что если у элемента объявлено max-height, оно не будет учитываться. Это можно обойти с помощью другого «хака». Вместо того, чтобы выставлять padding элементу, мы можем создать псевдоэлемент и назначить padding уже ему.
.CoverImage:before {
content: "";
display: block;
padding-bottom: 50%;
}
Теперь max-height у главного элемента будет работать. Следовало бы так же обрезать и переполнение псевдоэлемента.
.CoverImage {
display: block;
max-height: 300px;
max-width: 1000px;
overflow: hidden;
}
.CoverImage:before {
content: "";
display: block;
padding-bottom: 50%;
}
Этот прием для соотношения сторон используется компонентом FlexEmbed в препроцессоре SUITCSS. Этот компонент предназначен прежде всего для отзывчивых встраиваемых видео, но он достаточно гибок, чтобы быть полезным всякий раз, когда вам необходим отображаемый элемент с предопределённым соотношением сторон. Этот компонент предоставляет модификаторы для пропорций 2:1, 3:1, 16:9, и 4:3. Компонент картинок-обложек может расширить компонент FlexEmbed.
<div></div>
Фоновое изображение
Картинка-обложка добавляется в качестве фонового изображения, которое растягивается до размера, достаточного, чтобы покрыть всю область элемента. Это гарантирует, что изображение обрежется чтобы вписаться в пропорции элемента.
.CoverImage {
...
background-repeat: no-repeat;
background-size: cover;
}
Если хотите разные обложки-картинки для разных ситуаций, они могут быть добавлены через атрибут style.
<div></div>
Изображения могут быть полностью отцентрированы с помощью позиции фона и центрирования блока. Эта гарантирует, что изображение будет отцентрировано в элементе, и что сам элемент будет так же отцентрирован внутри своего родителя (когда он достигнет значения max-width).
.CoverImage {
...
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
}
Финальный результат
Если вы полагались на модуль FlexEmbed, то вам потребовалось совсем немного кода. (Посмотрите демо-пример со всем кодом, включающим код от FlexEmbed)
/**
* требуется: suitcss/встроенная гибкость
*/
.CoverImage {
background-position: 50%;
background-repeat: no-repeat;
background-size: cover;
margin: 0 auto;
max-height: 300px;
max-width: 1000px;
}
<div
<
</div>
Вы можете добавить дополнительные настройки, такие как добавление фонового цвета, или возможность переключения между ключевыми словами cover и contain для background-size.
P.S. Это тоже может быть интересно:
Наложение картинки на картинку с прозрачностью (не тестировалось) · GitHub
Наложение картинки на картинку с прозрачностью (не тестировалось) · GitHubInstantly share code, notes, and snippets.
Наложение картинки на картинку с прозрачностью (не тестировалось)
| //Предположим, что картинка находится в диве ( <div><img src=»/images/old-image.png»></div> ) | |
| $(‘div.myimage’).hover( | |
| function(){ //при наведении мыши | |
| var sourceImg = $(‘div.myimage img’).attr(‘src’); //забираем урл картинки | |
| $(‘div.myimage img’).attr(‘/images/new-image.png’).css({opacity: 0.5}); //вставляем новую картинку и накладываем прозрачность 50% | |
| $(this).css(‘background-image’, sourceImg); //делаем оригинальную картинку фоном дива | |
| }, | |
| function(){ //при уходе мыши | |
| var sourceImg = $(this).css(‘background-image’); //забираем урл старой картинки | |
| $(‘div.myimage img’).attr(sourceImg).css({opacity: 1}); //вставляем старую картинку и возвращаем прозрачность | |
| $(this).css(‘background-image’, ‘none’); //убираем фон | |
| } | |
| ); |
Как добавить картинку фон на всю ширину экрана? Статья-инструкция
Полноэкранный фон картинкой считается в настоящий момент трендом в веб дизайне. Почти все темы на WordPress используют этот режим. Многие в комментариях и социальных сетях спрашивают нас про то, как сделать изображение фон на всю ширину страницы. Как правило настройка фонового изображения на всю ширину предполагает работу с html и css файлами. Вам также потребуется сам медиафайл большого размера, да еще при этом нужно сделать так, чтобы сама картинка масштабировалась для мобильных устройств. Казалось бы, все очень сложно и нужно вникать, но нет друзья. Все гораздо проще можно сделать и без редактирования о чем и поведаю в этой заметке.
Первое, что вам нужно сделать, это установить и активировать плагин Simple Full Screen Background Image. После активации перейдите в «Внешний вид» Fullscreen BG Image и загрузите свое фоновое изображение.
Рекомендуетм использовать картинку размером не менее 1600 × 1200 пикселей. Фоновое изображение будет автоматически масштабировано в соответствии с экраном браузера. После того, как вы загрузили параметры сохранения изображения. Перейдите на свой сайт, чтобы увидеть реальный пример.
Выбирая большие изображения в качестве фона вы обеспечите лучшее их качество отображения также и в мобильных устройствах. Потестируйте пример на разных типах экранов и в разных браузерах, чтобы увидеть результат.
Фоновое изображение на всю ширину в PRO версии
Если вы действительно хотите, чтобы пользовательские фоновые изображения были на следующем уровне на вашем сайте, вам нужна версия PRO этого плагина. В отличие от бесплатного плагина, где вы можете установить только 1 фоновое изображение, версия pro позволяет устанавливать неограниченные фоновые изображения.
Наилучшая часть об Full Screen Background Images Pro заключается в том, что она позволяет отображать разные фоновые изображения для разных контекстов. Например, вы можете выбрать другое фоновое изображение для:
- категории
- архив
- произвольные записи
- страницы
- Главная страница блога
- Главная страница
- Поиск и многое другое
Плагин имеет полную поддержку, поэтому, если для определенного типа записи нет специального фонового изображения, он отобразит глобальное изображение. Он также позволяет загружать и устанавливать фоновые изображения непосредственно из редактора сообщений. Кроме того, есть возможность выцветать изображения при загрузке страницы.
Этот плагин очень эффективен с точки зрения производительности и имеет минимальные накладные расходы.
Мы видим, что некоторые блоггеры фактически используют фоновые изображения в качестве нового признанного изображения. Это действительно здорово, если у вас хорошее чувство дизайна.
Мы надеемся, что эта статья помогла вам добавить полноэкранное фоновое изображение в WordPress. А вы их используете на сайте? Как вы это делаете? Вы собираетесь использовать метод кода или использовать другой плагин? Сообщите нам, оставив комментарий ниже.
Элемент изображения HTML
Элемент HTML позволяет
вы показываете разные картинки для
разные устройства или размеры экрана.
HTML-элемент
Элемент HTML дает веб-
разработчикам больше гибкости в
указание ресурсов изображения.
Элемент содержит один или
more элементов, каждый ссылается
к разным изображениям через srcset атрибут.Таким образом, браузер может выбрать изображение, которое лучше всего
соответствует текущему виду и / или устройству.
Каждый элемент имеет media Атрибут , который определяет, когда изображение является
Самый подходящий.
Пример
Показывать разные изображения для разных размеров экрана:
Примечание: Всегда указывайте элемент как последний дочерний элемент
элемент элемента
. Элемент используется браузерами, которые
не поддерживает элемент
, или если ни один из тегов не совпадает.
Когда использовать элемент изображения
У элемента есть две основные цели:
1.Полоса пропускания
Если у вас маленький экран или устройство, нет необходимости загружать большой
файл изображения. Браузер будет использовать первые элемент с соответствующими значениями атрибутов и игнорируйте любое из следующих
элементы.
2. Поддержка формата
Некоторые браузеры или устройства могут поддерживать не все форматы изображений. Используя элемент, вы можете добавлять изображения всех
форматы, и браузер будет использовать первый формат, который он распознает, и игнорировать любые
из следующих элементов.
Пример
Браузер будет использовать первый распознаваемый формат изображения:
Примечание: Браузер будет использовать первый элемент с соответствующим атрибутом
values и игнорировать любые следующие элементы .
Теги изображений HTML
| Тег | Описание |
|---|---|
| | Определяет изображение |
| <карта> | Определяет карту изображения |
| <зона | Определяет интерактивную область на карте изображений |
| <картинка> | Определяет контейнер для нескольких ресурсов изображений |
Как центрировать фоновое изображение внутри Div
В этом фрагменте вы узнаете, как центрировать фоновое изображение внутри элемента
Решения со свойствами CSS background и background-size¶
В нашем примере ниже мы используем элемент
Пример центрирования фонового изображения внутри
Название документа
<стиль>
.bg-image {
ширина: 100%;
высота: 200 пикселей;
фон: url ("/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg ") центр без повтора;
размер фона: 250 пикселей;
}
Попробуйте сами »Результат
Если вы хотите центрировать фоновое изображение внутри элемента
Пример центрирования фонового изображения с помощью значения «contain» свойства background-size: ¶
Название документа
<стиль>
.bg-image {
высота: 400 пикселей;
фон: url ("/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg") no-repeat center;
размер фона: содержать;
}
Попробуйте сами »Наш последний пример демонстрирует, как можно заполнить весь элемент
Пример центрирования фонового изображения со значением «обложки» свойства background-size: ¶
Название документа
<стиль>
.bg-image {
ширина: 100%;
высота: 400 пикселей;
фон: url ("/ uploads / media / default / 0001/01 / b408569013c0bb32b2afb0f0d45e93e982347951.jpeg ") центр без повтора;
размер фона: обложка;
}
Это какой-то пример.
Попробуйте сами »Bootstrap Background image — Учебники с расширенными примерами
- Utilities
- Background image
Легко установите фоновое изображение для любого элемента без написания кода CSS.
Обзор
Создайте отзывчивого фонового изображения для любого элемента без какого-либо кода CSS. Просто добавьте класс .bg-img в свой элемент и класс
.has-bg-img к родительскому элементу, к которому вы хотите применить фоновое изображение. Изображения являются частью модели DOM и преобразуются в фоновое изображение CSS после полной загрузки . Также возможно смешать фоновое изображение с цветом фона , используя режим наложения фона.
Пример
Базовый пример баннера раздела героя с обложкой фонового изображения. Фоновое изображение автоматически адаптирует область элемента с использованием background-size: cover .
Hero Section
С помощью Torus Kit легко установить фоновое изображение
Раздел героев
С помощью Torus Kit легко установить фоновое изображение
Режим наложения фона
Чтобы смешать фоновое изображение с цветом фона, используйте один из .bg-blend- <умножить | наложение | экран> . В противном случае будет видно только фоновое изображение.
Multiply
Добавьте .bg-blend-multiply class к .has-bg-img , чтобы использовать режим наложения multiply .
Режим наложения фона: Умножение
Режим наложения фона: "Умножение"
Overlay
Добавьте .bg-blend-overlay class к .has-bg-img для использования режима наложения наложения .
Режим наложения фона: Overlay
Режим наложения фона: "Умножение"
Screen
Добавьте .bg-blend-screen class к .has-bg-img , чтобы использовать режим наложения screen .
Режим наложения фона: Экран
Режим наложения фона: "Умножение"
Объектно-подходящее фоновое изображение
Можно создать фоновое изображение, используя только доступные служебные классы. Добавьте класс .bg к фоновому изображению, что сделает его с абсолютным позиционированием и установите ширину : 100% и высоту : 100% . Затем добавьте .obj-fit-cover class this , чтобы изображение заполнило пространство. Также не забудьте установить позицию родительского элемента.Вы можете использовать служебный класс позиции.
Поскольку элемент .bg появится на над содержимым , вам необходимо добавить к этому содержимому классы .position-relative и .z-index-1 .
Фоновое изображение с
.obj-fit-cover
Фоновое изображение с .obj-fit-cover
Часто задаваемые вопросы о фоновом изображении Bootstrap
Как изменить непрозрачность фонового изображения Bootstrap
Непосредственно управлять непрозрачностью background-image CSS нельзя, но вы можете использовать приведенный выше пример и установить .opacity- * для изображения с классом непрозрачности.
Непрозрачность фонового изображения
Альтернативный текст для фоновых изображений, доступность альтернативного текста
Избегайте отображения информационных изображений на фоне CSS
Если ваше изображение содержит важную информацию для конечного пользователя,
тогда он должен быть предоставлен в HTML тег с надлежащим
вместо текст. Спецификация CSS гласит:
По причинам доступности авторам не следует использовать фон изображения как единственный способ передачи важной информации.См. Интернет Руководство по доступности контента F3 [WCAG20]. Изображения недоступны в неграфических презентациях, и фоновые изображения могут быть отключены в высококонтрастные режимы отображения. Источник .
Не могу избежать использования изображений CSS или заменить текст для "неважные" фотографии окружающей среды и т. д.?
Спецификация CSS делает это "ДОЛЖНЫ", а не "ДОЛЖЕН", потому что бывают случаи, когда визуальный дизайн или существующий код затрудняет преобразование его в изображение HTML без редизайна интерфейса.В других случаях автор может захотеть чтобы предоставить альтернативный текст для окружающего изображения, который является , а не "важно" для понимания содержания, но из вежливости пользователям программ чтения с экрана, которые предпочитают знать, что изображено на картинке. Вот подробная статья об эмбиенте. изображения vs чистое украшение vs информационные образы.
При предоставлении альтернативного текста для изображения CSS есть количество соображений
Если Поэтому не помещайте фоновое изображение CSS внутри Сделайте это: Не делайте этого: Иногда есть зависимости в стеке CSS и возни с
это может расстроить дизайн и верстку сайта, либо просьбу
изменение кода могло зависнуть от одобрения различных
заинтересованные стороны.В случаях, когда у автора должна быть предыстория
изображение в Это взлом, потому что семантически альтернативный текст не включен
элемент, который на самом деле имеет изображение. Однако с экрана
читатель видит Не стесняйтесь комментировать в Twitter @davidmacd Дэвид Макдональд - ветеран WCAG, соредактор использования WAI ARIA в
HTML5
и член рабочей группы по доступности HTML5. Мнение мое собственное. Итак, вы смотрите на дизайн-композицию с изображением в ней и пытаетесь выбрать между использованием HTML Сначала вы можете подумать: «Это вообще имеет значение?» В конце концов, существует множество ситуаций, когда оба результата приводят к одинаковому визуальному результату. Но вы здесь, значит, , вы хотите принять осознанное решение . Вот пошаговый процесс выбора между ними. Фоновые изображения CSS могут быть видны, но представляют проблемы с доступностью. Например, Поскольку робот Googlebot не видит изображения напрямую, мы обычно концентрируемся на информации, представленной в атрибуте alt. Не стесняйтесь дополнять атрибут «alt» словом «title» и другими атрибутами, если они представляют ценность для ваших пользователей! Хотите доступности и лучшего SEO? Используйте Остальные соображения относятся к улучшениям визуального дизайна изображений как чисто-визуального дизайна. Если вы ссылаетесь на один и тот же URL-адрес изображения, технически запрос будет таким же, поэтому время, необходимое для загрузки, должно быть одинаковым. Однако проблема производительности действительно сводится к тому, когда делается запрос. Если у вас есть группа больших фоновых изображений, объявленных в вашем CSS, браузеру потребуется больше времени, чтобы проанализировать файл CSS и извлечь изображения, что задержит загрузку всей страницы. с Кроме того, встроенные изображения ( Если вы используете один или несколько относительно небольших файлов изображений для улучшения эстетики, а преимущества в производительности незначительны, рассмотрите варианты манипуляции, которые у вас есть с помощью CSS. Фоновые изображения могут использоваться вместе с Если вы накладываете текст поверх изображения, гораздо проще создать прототип с фоновым изображением CSS. HTML Свойство CSS background-image используется для установки фонового изображения элементов HTML, таких как div, абзацы, заголовки, заголовки таблиц, тело и т. Д. Вы можете устанавливать изображения с разными расширениями, такими как png, jpg, gif, svg и т. Д. Вы также можете использовать одно или несколько изображений для установки фона элементов с помощью CSS3. Например: Настройка фона одного изображения: background-image: url («images / demo.jpg»); Или используйте сокращенное свойство фона: фон: url («images / demo.jpg ”); Вы также можете использовать абсолютный путь: фоновое изображение: & nbsp; URL («http://www.example.com/images/demo.jpg»); Установка нескольких фоновых изображений: background-image: url («images / image1.jpg»), url («images / image2.jpg »), url (« images / image3.jpg »); Ниже приведены демонстрации различных способов использования свойства CSS background-image. Я буду использовать одиночные и множественные изображения с переходом, положением и другими значениями. Вы также можете увидеть живые демонстрации с каждым примером. Создается класс CSS, в котором используется фоновое изображение. Класс назначается тегу Следующий класс устанавливает фоновое изображение: .divbk { background-image: url ("images / sunset.jpg"); высота: 400 пикселей; ширина: 450 пикселей; } Если по какой-то причине фоновое изображение не может быть загружено в браузеры пользователя: из-за скорости Интернета, медленного сервера или проблемы с браузером, вы можете установить резервный цвет в свойстве фона следующим образом: фон: url («images / sunset1.jpg ») #eee; Посмотреть демонстрацию онлайн: В URL-адресе для демонстрации дано неправильное имя изображения. Поскольку изображение недоступно, вместо него используется цвет фона: .divbk { фон: url ("images / sunset1.jpg") # A3B8C0; высота: 400 пикселей; ширина: 450 пикселей; } В этом примере я использовал два изображения в свойстве CSS3 background-image.Наряду с настройкой фоновых изображений используются следующие свойства background position и background-repeat: Вот как несколько изображений устанавливаются с другими свойствами CSS: background-image: url ("images / car.jpg"), url ("images / motoway.jpg"); высота: 500 пикселей; ширина: 400 пикселей; background-position: center, left; фоновый повтор: без повтора; Повторение фона используется для предотвращения повторения изображения с помощью значения no-repeat .Хотя вы можете установить положение обоих изображений, используя разные направления. Если вы не укажете положение, по умолчанию будет вверху слева для обоих изображений. Хотя нет свойства для установки прозрачных изображений, установленных в качестве фона с помощью CSS, вы можете использовать Photoshop или какой-либо другой инструмент, чтобы сделать изображения прозрачными. В CSS одним из способов может быть использование фона с linear-gradient и использование там RGB, что позволяет установить непрозрачность. Следующий пример демонстрирует, как это можно сделать: Полный код вы можете увидеть на демонстрационной странице. Это CSS, используемый для достижения непрозрачности фона изображения: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 .divbk { height: 450px; ширина: 400 пикселей; фон: -webkit-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg"); фон: -o-linear-gradient (сверху, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg"); фон: -ms-linear-gradient (top, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg "); фон: -moz-linear-gradient (top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url (" images / motoway.jpg "); фон: -webkit-gradient (линейный, слева вверху, слева внизу, остановка цвета (0%, rgba (255,255,255,0,7)), остановка цвета (100%, rgba (255,255,255,0,7))), URL-адрес ("images / motoway.jpg"); фон: linear-gradient (вверх, rgba (202,215,219,0,8) 0%, rgba (255,255,255,0,7) 100%), url ("images / motoway.jpg) "); } Свойство CSS3 совместимо со всеми основными браузерами; однако вам придется обращаться с каждым отдельно.Например, в Mozilla Firefox вы должны использовать эту строку: фон: -moz-linear-gradient (сверху, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url ("images / motoway.jpg"); В этом примере я использовал ту же высоту и ширину для div, что и изображение. Если у вас есть меньшее изображение или больший div, используйте свойство repeat, как показано ниже: фон: linear-gradient (to top, rgba (202,215,219,0.8) 0%, rgba (255,255,255,0.7) 100%), url («images / motoway.jpg» повторяется 0 0); В случае вышеприведенного примера изображение не будет повторяться, а пустое пространство будет заполнено заданным цветом RGB. Обратите внимание, что я использовал то же изображение, что и в приведенном выше примере, с несколькими фоновыми изображениями. Вы также можете установить фоновые изображения для элементов таблицы, используя свойство CSS background image.Заголовок таблицы и изображения данных таблицы могут быть установлены отдельно. Если вы установите фоновое изображение в основном теге В следующей демонстрации я установлю только фоновое изображение заголовков таблиц: Следующий CSS используется для создания таблицы, особенно фокус на заголовке таблицы CSS: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 22 23 24 25 26 27 28 29 31 34 35 36 37 .демотбл { граница-обрушение: обрушение; } .demotbl th { цвет: # EAE635; размер шрифта: 20 пикселей; фон: url ("images / CSS-background-image-table.jpg"); высота: 50 пикселей; ширина: 150 пикселей; border-radius: 6px; } .demotbl td { граница: 1 пиксель, пунктирная черная; бордюр-верх: нет; цвет: # 002F5E; отступ: 15 пикселей; ширина: 100 пикселей; цвет фона: # D2E6FB; } Вы можете увидеть полный код на демонстрационной странице. Кроме того, вы можете использовать свойства CSS3, такие как градиент, для создания изображения, похожего на внешний вид, с помощью цветов. Здесь написано руководство. В следующем примере я покажу вам, как можно установить изображение в качестве полноэкранного фона для страницы. Вы можете увидеть полный код и демонстрацию, щелкнув ссылку ниже. Точно так же вы можете использовать background-image с другими свойствами фона, чтобы создать крошечное изображение, покрывающее весь контейнер или заданные элементы.Например, вы хотите использовать фоновое изображение для верхнего колонтитула, нижнего колонтитула, левой навигации или других элементов веб-страницы, а не на всю страницу. Для этой демонстрации я использую крошечное изображение, которое повторяется, чтобы покрыть все пространство элементов div. CSS: фон: url ("images / background.jpg") центр центр исправлен; фон-повтор: повторение; высота: 300 пикселей; ширина: 200 пикселей; Однако, прежде чем использовать это, рассмотрите проблемы скорости с кешем браузера. Используя свойство background-size с background-image, вы можете установить высоту и ширину фонового изображения. Синтаксис для использования свойства CSS background-size, например: размер фона: 200 пикселей 300 пикселей; Где первое значение представляет ширину, а второе указывает высоту изображения. См. Пример ниже: Вы также можете указать высоту и ширину в процентах.Например: background-image: url ("images / banana.jpg"); размер фона: 70%; Вы должны использовать background-repeat: no-repeat; в этом случае, в противном случае оставшееся пространство контейнера (в этом случае div) будет заполнено этим изображением. Используя свойство transform с сокращением фона или свойствами фонового изображения, вы также можете вращать и масштабировать изображения. Ниже приведены несколько примеров использования свойства transform с фоновыми изображениями: Демонстрация поворота изображения на 20 градусов CSS: фон: url ("images / bk.jpg"); преобразование: поворот (20 градусов); Точно так же вы можете наклонять, масштабировать и переводить фоновые изображения с помощью свойства transform. Ниже приведен пример, в котором используется перекос со значениями x и y : Следующий CSS используется для перекоса изображения по свойству преобразования: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 18 19 20 21 22 23 24 25 26 27 28 29 31 34 35 36 37 .divbk { фон: url ("images / bk.jpg"); -webkit-transform: skew (10deg, 10deg); -moz-transform: skew (10deg, 10deg); -ms-transform: skew (10deg, 10deg); -о-преобразование: наклон (10 градусов, 10 градусов); преобразование: наклон (10deg, 10deg); высота: 230 пикселей; ширина: 215 пикселей; поля: 42 пикселя; } .контейнер { бордюр: сплошной черный 1 пиксель; высота: 400 пикселей; ширина: 300 пикселей; цвет фона: # D5E6F4; } Просмотрите полный код, щелкнув изображение или ссылку выше. Свойство CSS background-image следует использовать, если оно является частью дизайна, а не содержимым.Изображения маленькие и должны повторяться. Вы можете смешивать небольшие изображения со свойствами CSS3. Если ваши изображения являются частью дизайна, вы должны использовать свойство background-image, например, в фоне заголовка, в качестве фона веб-страницы, заголовков таблиц и т. Д. Если изображения предназначены для контента и имеют некоторое семантическое значение, вам следует использовать тег Если вы хотите включать изображения, если веб-страницы печатаются по умолчанию, вам следует использовать тег Классический
Столбцы
Нижние результаты
Правильные результаты
Вкладки (столбцы)
Вкладки (строки) Консоль в редакторе (бета) Очистить консоль при запуске Номера строк Обернуть линии Отступ с табуляцией Подсказка по коду (автозаполнение) (бета) 2 пробела 3 пробела 4 пробела По умолчанию: Sublime TextEMACS По умолчанию: BigBiggerJabba Код автозапуска Только код автозапуска, который проверяет Код автосохранения (натыкается на версию) Автоматически закрывать HTML-теги Автоматически закрывающие скобки Проверка действующего кода Выделите совпадающие теги Показывать панель шаблонов реже role = "img" и ария-этикетка может скрыть внутреннее содержимое из-за доступных
расчет имени
, или вспомогательные технологии могут просто игнорировать ария-этикетка . и ария-этикетка с role = "img"
<диапазон
role = "img" aria-label = "[поместите альтернативный текст здесь]>
[все остальное мое содержание]
[все остальное
моего содержания] Что делать, если у автора должно быть изображение CSS в div,
содержит контент
<диапазон
role = "img" aria-label = "[поместите альтернативный текст здесь]>
[все остальное мое содержание] непосредственно после него эта информация будет предоставлена таким образом, чтобы
будет казаться, что альтернативный текст находится в том же месте, что и
изображение на заднем плане. Сводка
с aria-label и role = "img. Это также верно в ситуации
где CSS должен использоваться для информационного содержания. с aria-label и role = "img" сразу после Информация об авторе:
HTML img vs CSS background-image
& lt; img & gt; или фоновое изображение CSS. Шаг 1. Доступность
& lt; img & gt; Теги могут добавлять замещающий текст и атрибут заголовка, которые могут быть выбраны программами чтения с экрана.Это важно не только для конечных пользователей, но и для индексации в результатах поиска Google. Вот выдержка из официального центрального блога Google для веб-мастеров об умном использовании альтернативных атрибутов: & lt; img & gt; тег. Шаг 2. Фоновое изображение CSS и производительность
& lt; img & gt; , запросы выполняются по мере анализа HTML, поэтому любой контент, предшествующий тегу в документе, будет информацией, которую пользователи могут начать читать. & lt; img & gt; или & lt; picture & gt; ) могут использовать такие инструменты, как заливка изображений и отложенная загрузка, для еще большего повышения производительности. Шаг 3. Возможности CSS манипулирования фоновым изображением
background-color , background-repeat , background-attachment , background-position и background-blend-mode . Это открывает множество возможностей, если возникнет необходимость в манипуляциях. Заключение
& lt; img & gt; Теги следует использовать для обеспечения доступности и SEO.В противном случае подумайте о скорости, производительности и манипуляциях, когда изображение является чисто визуальным улучшением дизайна. Десять примеров для установки изображения с помощью свойства фонового изображения CSS
Назначение свойства фонового изображения CSS
Установка примера резервного цвета
Демонстрация нескольких фоновых изображений , то фоновое изображение может быть применено и ко всей таблице.
для включения изображений на вашу веб-страницу. Вы можете использовать теги alt и title в теге
, которые важны для целей SEO, чтобы также донести смысл до поисковых систем.
.
Div Background-Image - JSFiddle - Code Playground
Редактор макета
Консоль
Общие
Поведение
Заглушки