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

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

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

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

Свойство background-size принимает либо ключевое слово ( cover или contain ), либо пару не ключевых слов ( |

), либо не ключевое слово и значение auto . Например:

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

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

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

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

  • Синтакис:
  • Значение по умолчанию: auto
  • Применяется: ко всем элементам
  • Наследуется: да
  • Анимируется: да, за исключением ключевых слов

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

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

— значение указанное в процентах масштабирует фоновое изображения до указанных процентов относительно области позиционирования фона, который определяется свойством background-origin. Если значение свойства background-origin не указано автором, будет использовано значение padding-box , то есть фоновое изображение позиционируется относительно системы координат фона, центр которой находится в верхнем левом углу.

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

      • При вёрстке страниц веб-сайта часто требуется задать фон определённому объекту для улучшения читаемости текста и внешнего вида портала в целом. Какими способами и методами можно задавать фон в 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 — полную прозрачность.

      Пример задания прозрачного фона:


      Надеемся, что данное руководство вам пригодилось, и желаем успехов в освоении веб-дизайна!

      Пример

      Укажите размер фонового изображения с "Auto" и в пикселях:

      #example1 <
      background: url(mountain.jpg);
      background-repeat: no-repeat;
      background-size: auto;
      >

      #example2 <
      background: url(mountain.jpg);
      background-repeat: no-repeat;
      background-size: 300px 100px;
      >

      Подробнее примеры ниже.

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

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

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

      Значение по умолчанию: auto
      Inherited: no
      Animatable: yes. Читайте о animatable
      Version: CSS3
      Синтаксис JavaScript: object.style.backgroundSize="60px 120px"

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

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

      Номера следуют -webkit-, -moz-, or -o- Укажет первую версию, которая работала с префиксом.

      Свойство
      background-size 4.0
      1.0 -webkit-      		 9.0 4.0
      3.6 -moz-      		 4.1
      3.0 -webkit-      		 10.5
      10.0 -o-

      Синтаксис CSS

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

      Значение Описание
      auto Значение по умолчанию. Фоновое изображение отображается в исходном размере
      length Задает ширину и высоту фонового изображения. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второй параметр имеет значение "Auto". Читать о единицах длины
      percentage Задает ширину и высоту фонового изображения в процентах от родительского элемента. Первое значение задает ширину, второе значение задает высоту. Если задано только одно значение, то второе устанавливается в "Auto"
      cover Измените размер фонового изображения, чтобы охватить весь контейнер, даже если он должен растянуть изображение или вырезать немного от одного из краев
      contain Измените размер фонового изображения, чтобы убедиться, что изображение полностью отображается
      initial Присваивает этому свойству значение по умолчанию. Читайте о initial
      inherit Наследует это свойство из родительского элемента. Читайте о inherit

      Другие примеры

      Пример

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

      #example1 <
      background: url(mountain.jpg);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      >

      #example2 <
      background: url(mountain.jpg);
      background-repeat: no-repeat;
      background-size: 75% 50%;
      >

      Пример

      Укажите размер фонового изображения с помощью "Cover":

      Пример

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

      Пример

      Здесь у нас есть два фоновых изображения. Мы указываем размер первого фонового изображения с "содержать", а второй фон-изображение с "Cover":