Background size cover что это: background-size | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

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+

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам
Ссылка на спецификацию	http://www.w3.org/TR/css3-background/#the-background-size

Версии CSS

CSS 1	CSS 2	CSS 2.1	CSS 3

Описание

Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис

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.

Цвет и фон

CSS по теме

background-size

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

Как изменить размер фоновой картинки через CSS3
Масштабирование фона

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

Рецепты CSS

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

масштабируем фон — учебник CSS

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

Значения background-size

Значения для свойства background-size можно задавать при помощи ключевых слов, а также в любых единицах измерения CSS. В одной записи можно указывать размеры как для одной, так и для двух сторон — горизонтальной и вертикальной (последовательность важна).

Ключевые слова

auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:
```

background-size: auto auto;
```
…то размеры фона останутся оригинальными. Если значение auto задано лишь для одной из сторон, то размер фона будет автоматически подогнан под пропорции изображения. Например, если записать следующее:
```

background-size: 250px auto;
```
…то высота фоновой картинки будет вычисляться автоматически.
contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте.
Пропорции картинки сохраняются.
cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта.

Числовые значения

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

Чтобы задать точную ширину и высоту, используйте два значения — первое для ширины, второе для высоты:


background-size: 300px 300px;

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

Чтобы сохранить пропорции фона, используйте для одной из сторон свойство auto:

Здесь высота рисунка составляет 50% от высоты элемента, а ширина подгоняется автоматически

Свойство background-size часто используется на практике. Например, его очень удобно использовать, когда размер элемента указан в процентах. Если задать блоку ширину 50% от ширины экрана, а его фону — ширину 100%, то при изменении размера окна фон всегда будет соответствовать ширине элемента.

Поддержка браузерами

Практически все используемые браузеры (как десктопные, так и мобильные) хорошо работают со свойством background-size. Internet Explorer понимает данное свойство, начиная с 9-й версии.

Далее в учебнике: пишем стиль для фона, используя сокращенную запись — «мульти»-свойство background.

css — В чем разница между background-size: cover; и размер фона: 100%;?

спросил 8 лет, 3 месяца назад

Изменено 2 года, 1 месяц назад

Просмотрено 23 тысячи раз

Новинка! Сохраняйте вопросы или ответы и организуйте свой любимый контент.
Узнать больше.

Когда я устанавливаю для свойства background-size изображения div значение background-size: cover;

или размер фона: 100%; оба выглядят одинаково.

Какая разница? Когда я должен использовать укрытие, а когда 100%?

css
размер фона

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

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

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

Ваш вопрос : Почему они выглядят одинаково ?
Ответ : Если изображение/контейнер квадратные

См. http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover например

вот скрипка: http://jsfiddle.net/RS5kX/19/

background-size:100%;

= размер фона: 100% авто; = ширина устанавливается равной 100%, а высота фонового изображения соответствует соотношению сторон изображения.

background-size:cover; означает, что фоновое изображение всегда будет соответствовать всему div , у вас не останется пустых мест в вашем div

 background-size:100% 100%

также не оставит пустого места, но, конечно, это нарушит исходное соотношение сторон изображения

Довольно точно background-size: обложка; означает, что изображение будет заполнять элемент, сохраняя его соотношение сторон, а background-size: 100%; просто заставит изображение заполнить 100% ширины элемента.

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя электронную почту и пароль

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

Стиль HTML DOM backgroundSize Свойство

❮ Назад ❮ Справочник по объектам стиля Далее ❯

Пример

Укажите размер фонового изображения:

document. getElementById(«myDIV»).style.backgroundSize = «60px 120px»;

Попробуйте сами »

Определение и использование

Свойство backgroundSize задает или возвращает размер фоновых изображений.

Поддержка браузера

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

Недвижимость
backgroundSize	4,0	9.0	4,0	4.1	10,5

Синтаксис

Возвращение свойства фонового размера:

Объект .Style.backgroundsize

Установите свой свойство. |наследовать»

Значения свойств

Значение	Описание
авто	Значение по умолчанию. Фоновое изображение содержит ширину и высоту 90 125.
длина	Задает ширину и высоту фонового изображения. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, для второго устанавливается значение «авто»
процент	Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение устанавливает ширину, второе значение устанавливает высоту. Если указано только одно значение, второе устанавливается на «авто»
крышка	Масштабируйте фоновое изображение как можно больше, чтобы область фона полностью закрывалась фоновым изображением. Некоторые части фонового изображения могут не отображаться в области позиционирования фона
содержат	Масштабируйте изображение до максимального размера, чтобы его ширина и высота могли поместиться в области содержимого
начальный	Устанавливает для этого свойства значение по умолчанию. Читать о инициал
унаследовать	Наследует это свойство от родительского элемента. Читать о унаследовать

Технические детали

Значение по умолчанию:	авто
Возвращаемое значение:	Строка, представляющая свойство background-size элемента
Версия CSS	CSS3

Связанные страницы

Ссылка CSS: свойство background-size

❮ Назад ❮ Справочник по объектам стиля Далее ❯

НОВИНКА

Мы только что запустили
Видео W3Schools

Узнать

ВЫБОР ЦВЕТА

КОД ИГРЫ

Играть в игру

Лучшие ссылки

HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

2 Top3 Examples Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

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

Background size cover что это: background-size | htmlbook.ru

background-size | htmlbook.ru

Краткая информация

Версии CSS

Описание

Синтаксис

Значения

Браузеры

CSS по теме

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

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

Рецепты CSS

масштабируем фон — учебник CSS

Значения background-size

Ключевые слова

Числовые значения

Поддержка браузерами

css — В чем разница между background-size: cover; и размер фона: 100%;?

Зарегистрируйтесь или войдите в систему

Опубликовать как гость

Опубликовать как гость

Стиль HTML DOM backgroundSize Свойство

Пример

Определение и использование

Поддержка браузера

Синтаксис

Значения свойств

Технические детали

Связанные страницы

ВЫБОР ЦВЕТА

КОД ИГРЫ

Top Tutorials

Лучшие ссылки

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

Рубрики

Рубрики