CSS background size

05.02.2019 at 08:49

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

Синтаксис и значения свойства

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

  1. CSS-единицы. Могут использоваться любые возможные в этом языке единицы: пиксели, сантиметры и так далее.
  2. Проценты. Необходимы для адаптивной верстки сайта. Можно настроить размер фонового изображения в процентах от ширины или высоты веб-страницы.
  3. Auto. Если выставляется единственное значение, картинка масштабируется таким образом, чтобы сохранить пропорции фонового изображения. Если же пишется два auto (для ширины и высоты), то размер картинки становится стандартным.
  4. Contain. Делает так, чтобы изображение полностью вписывалось в блок, сохраняя одну из сторон пропорционально изображению.
  5. Cover. Также пропорционально увеличивает фоновую картинку, но при этом масштабирует ее таким образом, что часть изображения может быть не видна.

Лучше понять разницу между cover и contain можно на таком примере.


В первом случае используется значение contain, а во втором – cover

Применение свойства на практике

Учитывая разницу в разрешениях экрана между разными устройствами, рекомендуется активно использовать свойство background-size. Иначе картинка будет обрезаться при низком разрешении или быть слишком маленькой при большом. Недостаток свойства – искажение изображения при масштабировании, с которым ничего по сути не получится сделать, кроме как подбирать фоновые картинки с высоким разрешением.
Может потребоваться указать ширину и высоту фоновой картинки (первое и второе значение соответственно). Также можно выставить auto, и второй параметр будет подобран автоматически, исходя из пропорций картинки.
С помощью свойства background-size можно играться с градиентами, добиваясь интересных эффектов. Например, можно сделать его повторяющимся.


Код у такого фона следующий:

<html>
    <head>
        <title>Градиент</title>
        <style> 
            body {
                background: #f8ffe8;
                background: linear-gradient(to right, red,blue 45%,green);
                background-size: 100px 100px;
            } 
        </style>
    </head>
    <body>
    </body>
</html>

С помощью этого свойства можно сделать ровные (не градиентные) полосы. Для этого используется такой код. 

body {
    background: #33bbf1;
    background: linear-gradient(red 50%, green 50%);
    background-size: 50px 50px;
}

И результат его исполнения браузером.

Особо продвинутый код позволяет реализовать, например, клеточный фон. Для этого необходимо сделать несколько фонов, в одном из которых обязательно должен быть альфа-канал (чтобы изображения не перекрывали друг друга). Пример кода:

body {
    background: linear-gradient(transparent 50%, rgba(186,0,0,0.2) 50%), 
                linear-gradient(90deg, rgba(186,0,0,0.2) 50%, transparent 50%);
    background-size: 80px 80px;
}

Результат.

Вендорные префиксы

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

body {
    background: linear-gradient(transparent 50%, rgba(186,0,0,0.2) 50%), 
                linear-gradient(90deg, rgba(186,0,0,0.2) 50%, transparent 50%);
    -moz-background-size: 80px 80px; /* Firefox 3.6+ */
    -webkit-background-size: 80px 80px; /* Safari 3.1+ и Chrome 4.0+ */
    -o-background-size: 80px 80px; /* Opera 9.6+ */
    background-size: 80px 80px; /* Современные браузеры */
}

По-хорошему, градиент в примере тоже надо сделать совместимым со старыми версиями браузеров, поскольку он принадлежит к CSS3. Но в таком случае пример будет избыточным. Просто надо знать, что в градиентах также добавляются вендорные префиксы, чтобы добиться полной совместимости.

Tags: