Все справочники находятся в стадии наполнения. Если у вас есть идеи на счёт того как улучшить этот раздел, то вы можете оставить комментарий под конкретной записью или написать свои предложения по адресу [email protected].

background-size

CSSbackground-size
mangohost

Свойство background-size - используется для настройки размера фоновых изображений.

Общие сведения

Фоновое изображение может быть настроено таким образом чтобы полностью покрывать всю область элемента или иметь заданные автором размеры.

У некоторых изображений (<image>), таких как, например, JPEG, есть встроенные размеры и пропорции, а у других изображений, таких как градиенты (<gradient>) нет встроенных размеров и пропорций и они занимают всю фоновую область, если не указано иное. Окончательный размер фонового изображения формируется на основе того есть ли у фонового изображения внутренние размеры и пропорции.

Свойство background-size принимает либо ключевое слово (cover или contain), либо пару не ключевых слов (<length> | <percentage>), либо не ключевое слово и значение auto. Например:

background-size: cover;       /* ключевое слово */
background-size: contain;     /* ключевое слово */
background-size: 100% 50%;    /* пара значений из не ключевых слов */
background-size: 300px 200px; /* пара значений из не ключевых слов */
background-size: 50% auto;    /* не ключевое слово + плюс значение 'auto' */

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

Если указано только одно не ключевое значение, то второе считается как auto.

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

Синтаксис свойства

  • Синтакис:
    background-size: <bg-size> [ , <bg-size> ]*
    
    /* где */
    
    <bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
  • Значение по умолчанию: auto
  • Применяется: ко всем элементам
  • Наследуется: да
  • Анимируется: да, за исключением ключевых слов

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

  • <length> -  значение <length> масштабирует фоновое изображения до указанного значения в соответствующем направлении. Нельзя указывать отрицательную длину.
  • <percentage> - значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box, то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.
  • contain - масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наибольшего, чтобы его ширина и высота вписывались в область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно растягивается на всю область позиционирования.
  • cover - масштабирует изображение, сохраняя при этом его встроенное соотношение сторон, до наименьшего размера, чтобы его ширина и высота могли полностью покрывать область позиционирования. Если у фонового изображения нет встроенных пропорции и нет встроенного размера, то оно отображается в размере области позиционирования.
  • auto - ключевое слово, которое масштабирует фоновое изображение в соответствующем направлении, сохраняя его встроенные пропорции.
    • Если у изображения есть встроенные размере (высота и ширина), то оно будет отображаться со своими размерами.
    • Если у изображения нет встроенных пропорций и размеров, то оно будет отображаться с размерами области позиционирования.
    • Если у него нет размеров, но есть пропорции, то оно отобразиться так как-будто было установлено ключевое слово contain.
    • Если у изображения есть один из встроенных размеров и пропорция, то оно отобразиться с размерами определёнными этим одним размером и пропорцией.
    • Если у изображения есть один из встроенных размеров, но нет пропорции, оно отобразиться с использованием этого одно встроенного размера и соответствуюещего размера области позиционирования.

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

CSS3 Background-image options

IE
9
0.09%
10
0.01%
11
0.44%
Edge
105
0.8%
106
3.08%
107
0.25%
Firefox
104
0.07%
105
1.51%
106
0.68%
107
0.01%
108
0%
Chrome
105
6.01%
106
15.7%
107
0.64%
108
0.02%
109
0.01%
Safari
15.6
1.63%
16.0
0.5%
16.1
0.07%
16.2
0%
TP
0%
Safari on iOS
15.6
6.72%
16.0
4.55%
16.1
0.24%
Chrome for Android
107
40.28%

Пример

Ниже вы увидите пример использования свойства background-size:

mangohost