Background size cover что это
Перейти к содержимому

Background size cover что это

  • автор:

Background-size: масштабирование фонового рисунка

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

Значения background-size

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

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

  • auto (значение по умолчанию) — если данное значение установлено для горизонтали и вертикали, т. е.:
background-size: auto auto;

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

background-size: 250px auto;

…то высота фоновой картинки будет вычисляться автоматически.

  • contain — фоновое изображение масштабируется так, чтобы поместиться внутрь элемента целиком. В зависимости от своей формы и формы элемента, рисунок растягивается, чтобы поместиться полностью либо по ширине, либо по высоте. Пропорции картинки сохраняются. background-size: contain
  • cover — фоновое изображение масштабируется так, чтобы полностью заполнить пространство элемента, при этом сохраняя свои пропорции. Если пропорции элемента не соответствуют пропорциям изображения, это может привести к тому, что часть рисунка будет скрыта. background-size: cover
  • Числовые значения

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

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

    background-size: 300px 300px;

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

    background-size: 300px 300px

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

    background-size: auto 50%

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

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

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

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

    background-size

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

    Синтаксис

    background-size: [ | | auto ] | cover | contain

    Значения

    <значение>Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др. Задает размер фоновой картинки в процентах от ширины или высоты элемента. auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки. cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока. contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

    Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto . Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

    HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

        background-size   
    .

    Браузеры

    Safari до версии 4.1 и Chrome до версии 3.0 используют нестандартное свойство -webkit-background-size .

    Opera до версии 10.53 использует нестандартное свойство -o-background-size .

    Firefox до версии 4.0 использует нестандартное свойство -moz-background-size .

    background — size

    Нужно чтобы фоновая картинка заняла всю площадь элемента? Вам нужно это свойство!

    Время чтения: меньше 5 мин

    Открыть/закрыть навигацию по статье
    Контрибьюторы:

    • Светлана Коробцева ,
    • Антон Капустинский

    Обновлено 28 августа 2023

    Кратко

    Скопировать ссылку «Кратко» Скопировано

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

    Пример

    Скопировать ссылку «Пример» Скопировано

    Создадим блок и в качестве фона зададим ему красивую панораму:

    Фон с красивой панорамой

     div class="element">div>      
     .element  height: 100vh; background-color: #f1f1f1; background-image: url("landscape.jpg"); background-repeat: no-repeat;> .element  height: 100vh; background-color: #f1f1f1; background-image: url("landscape.jpg"); background-repeat: no-repeat; >      

    Примеры background-size

    Попробуйте поменять размеры фоновой картинки и посмотреть, как будет меняться фоновый паттерн.

    Свойство background-size

    Свойство background-size задает размер картинки фона. Значением свойства служат любые единицы для размеров, либо ключевые слова auto, cover или contain.

    Синтаксис

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

    Значение Описание
    auto Фон будет иметь натуральный размер, такой, как реальный размер картинки фона. Если же auto задано только для одной стороны, то по этой стороне фон будет масштабироваться так, чтобы иметь неискаженные пропорции.
    cover Масштабирует картинку так, чтобы она накрыла собой весь блок с сохранением пропорций. Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться. Блок всегда будет покрыт картинкой целиком.
    contain Масштабирует картинку так, чтобы она целиком влезла в блок с сохранением пропорций. При этом она может занять или всю ширину, или всю высоту (зависит от пропорций картинки и от размеров элемента). Блок в общем случае будет покрыт картинкой не целиком (зато картинка всегда будет видна вся, хоть и в уменьшенном варианте).

    Значение по умолчанию: auto .

    Использование

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

    Пример

    Сейчас фоновая картинка будет иметь свой натуральный размер:

    Пример

    Сейчас фоновая картинка будет размер 300px на 400px (в нашем случае пропорции картинки исказятся):

    Пример

    Сейчас фоновая картинка будет размер 400px на 400px (в нашем случае пропорции картинки исказятся):

    Пример

    Сейчас фоновая картинка будет размер 400px по горизонтали, а по вертикали ее размер подстроится так, чтобы пропорции не исказились:

    Пример

    Сейчас фоновая картинка будет размер 400px по вертикали, а по горизонтали ее размер подстроится так, чтобы пропорции не исказились:

    Пример . Значение contain

    Посмотрите на работу значения contain :

    .elem < background-size: contain; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >

    Пример . Значение cover

    Посмотрите на работу значения cover :

    .elem < background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >

    Пример . Улучшим работу cover

    Работу значения cover можно улучшить, если отцентрировать картинку с помощью свойства background-position (в нашем случае на видимые части начнут попадать головы лошадей, а не их задницы):

    .elem < background-position: center; background-size: cover; background-repeat: no-repeat; background-image: url("bg.png"); border: 1px solid black; margin-bottom: 20px; >#elem1 < width: 600px; height: 500px; >#elem2 < width: 500px; height: 600px; >#elem3 < width: 400px; height: 400px; >#elem4 < width: 300px; height: 400px; >#elem5 < width: 200px; height: 400px; >#elem6 < width: 300px; height: 100px; >
    . Значения в процентах

    В данном примере фоновая картинка занимает 50% ширины и 30% высоты окна браузера (при этом картинка будет иметь искаженные пропорции):

    Пример . Значения в пикселях и процентах

    В данном примере фоновая картинка занимает 50% ширины окна браузера и 400px по высоте (при этом картинка будет иметь искаженные пропорции):

    Пример . Значение auto для одной из сторон + проценты

    В данном примере фоновая картинка занимает 50% ширины окна браузера, а по высоте подстроится так, чтобы сохранить пропорции (поуменьшайте окно браузера, чтобы убедиться, что этой действительно так — картинка будут оставаться неискаженной):

    Пример . Значение auto для одной из сторон + пиксели

    В данном примере фоновая картинка занимает 300px по высоте, а по ширине подстроится так, чтобы сохранить пропорции:

    Пример . Значение 100% для обеих сторон

    Сейчас картинка будет всегда на весь экран с искаженными пропорциями (так как и по ширине и по высоте мы берем 100% , можно было просто написать одно значение):

    Пример . Значение contain

    Сейчас картинка будет занимать всю ширину или всю высоту с сохранением пропорций. Поуменьшайте окно браузера, чтобы увидеть, что картинка в различных состояниях будет занимать или всю ширину или всю высоту:

    Пример . Значение cover

    Сейчас картинка будет целиком накрывать собой в блок с сохранением пропорций: Картинка будет стараться поместиться целиком, но это не всегда будет получаться, поэтому какая-то ее часть будет обрезаться:

    Сравните с тем, как будет выглядеть картинка по умолчанию (при значении auto). Поуменьшайте окно браузера, чтобы увидеть отличия:

    Смотрите также

    • свойство background ,
      представляющее собой свойство-сокращение для фона

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

    Ваш адрес email не будет опубликован. Обязательные поля помечены *