Фон обложка: Pngtree фон, картинки и Фото бесплатная загрузка

См. ручку
CSS background-size: Template by SitePoint (@SitePoint)
на CodePen.

Элемент div имеет желтый фон, и фоновое изображение будет расположено над этим желтым фоном (поскольку фоновые цвета всегда располагаются под любым фоновым изображением).

Если мы сейчас просто добавим изображение в качестве фона, мы заметим, что видна только его часть. Это потому, что изображение шире и выше, чем div.

См. Pen
CSS background-size: Шаблон с фоновым изображением от SitePoint (@SitePoint)
на CodePen.

Изображение ниже дает представление о частях фонового изображения, которые не видны за пределами div.

Это явно не очень удовлетворительный результат, поэтому давайте посмотрим, как свойство background-size может нам помочь.

Установка размеров фона с помощью background-size

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

Свойство background-size предлагает на выбор два значения ключевых слов — покрытие и содержит — и оно также может принимать числовые значения с такими единицами измерения, как px , em и % , вдоль с авто . Давайте рассмотрим примеры каждого из них.

background-size: содержат

Значение содержит заставляет все изображение помещаться в контейнере, даже если его естественные размеры больше контейнера.

См. Pen
CSS background-size: Contain от SitePoint (@SitePoint)
на CodePen.

В этом примере мы добавили следующий CSS:

 div {
  размер фона: содержит;
  фоновый повтор: без повтора;
}
 

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

background-size: cover

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

См. Pen
CSS background-size: Cover by SitePoint (@SitePoint)
на CodePen.

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

Когда мы рассмотрим свойство background-position , мы узнаем, как указать, какая часть изображения является видимой.

background-size с другими значениями

Давайте посмотрим, какие другие значения мы можем использовать со свойством background-size .

Если мы добавим одно процентное значение 50% , то получится следующее:

См. размер фона CSS Pen
с одним значением % от SitePoint (@SitePoint)
на CodePen.

Фоновое изображение теперь составляет 50% ширины div, но все еще выше, чем div, поэтому нижняя часть изображения скрыта. Таким образом, одно процентное значение применяется к оси x. По умолчанию для оси Y установлено значение auto , что означает, что изображение сохраняет свое естественное соотношение сторон.

Вот что произойдет, если мы добавим два процентных значения ( 50% 50% ):

См. Размер фона CSS Pen
с двумя значениями % от SitePoint (@SitePoint)
на CodePen.

Ого! Теперь изображение покрывает 50% ширины div и 50% высоты — это означает, что его соотношение сторон значительно искажено.

Мы получим аналогичные результаты, если заменим % на px или другие значения единиц измерения. Мы могли бы, например, сделать что-то вроде background-size: 50px 50px или background-size: 200px 3em и так далее. Мы можем поэкспериментировать с этими значениями в Pen выше… хотя этот подход редко будет полезен, потому что он будет искажать фоновое изображение, если мы тщательно не выберем значения, сохраняющие его соотношение сторон.

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

Установка положения фоновых изображений с помощью background-position

Выше мы видели, что по умолчанию верхний левый угол нашего фонового изображения помещается в верхний левый угол его контейнера. То есть настройка по умолчанию background-position выглядит так:

 div {
  background-position: слева вверху; /* или 0 0 и т.д.*/
}
 

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

Использование background-position с ключевыми словами

В нашем примере изображения много голубого неба вверху слева, поэтому давайте вместо этого расположим его снизу справа:

 div {
  размер фона: обложка;
  background-position: справа внизу;
}
 

См. размер фона CSS Pen
со значениями длины от SitePoint (@SitePoint)
на CodePen.

В дополнение к различным комбинациям сверху , снизу , слева и справа , есть также центр , который красиво центрирует изображение. (Попробуйте заменить background-position: right bottom; на background-position: center; в Pen выше.)

Использование background-position со значениями длины

Мы можем расположить наше фоновое изображение со значениями длины, такими как пиксели и ems. Это позволяет нам отталкивать и оттягивать изображение от краев контейнера. Например:

 дел {
  размер фона: обложка;
  фоновая позиция: 20px 2em;
}
 

См. фоновую позицию CSS Pen
со значениями длины от SitePoint (@SitePoint)
на CodePen.

Здесь изображение закрывает контейнер, но затем оно смещается на 20 пикселей слева от контейнера и на 2 em сверху.

Значения длины можно комбинировать со значениями ключевых слов. Например, нижний 20px вправо 2em перемещает изображение на 20px снизу и на 2em справа.

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

Использование background-position с процентными значениями

Использование background-position процентных значений дает нам большой контроль над позиционированием нашего изображения, но это может быть немного сложно понять. Для этой демонстрации мы удалим размер фона и просто будем работать с естественными размерами изображения:

 раздел {
  фоновая позиция: 50% 50%;
}
 

См. фоновую позицию CSS Pen
с процентными значениями от SitePoint (@SitePoint)
на CodePen.

Так что же означает 50% ? 50% чего? Это означает, что отметка 50% изображения совпадает с отметкой 50% контейнера . То есть, если мы проведем вертикальные и горизонтальные линии через центр изображения и центр контейнера, эти линии совпадут, как показано на рисунке ниже.

Если мы установим background-position на 20% 40% , это означает, что вертикальная линия на 20% слева от изображения совпадает с вертикальной линией на 20% слева от контейнера, а горизонтальная линия на 40 % от верхней части изображения совпадает с вертикальной линией на 40 % от верхней части контейнера, как показано ниже.

Заключение

Свойство background-size — действительно полезное дополнение к CSS, и оно часто оказывается полезным, особенно когда контейнеры меняют размер в адаптивных макетах. 9Свойство 0021 background-position добавляет дополнительные возможности, позволяя нам выбирать, как фоновые изображения располагаются внутри контейнера.

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