Учебник по фоновым изображениям CSS

В этом уроке мы узнаем, как изменить фон элементов CSS.

Свойство background позволяет управлять фоном любого элемента. Это сокращенное свойство, поэтому мы можем написать несколько свойств в одном блоке кода. Например:

body {
  background:
     fixed                    /* attachment *
     blue;                    /* color */
     content-box              /* clip */
     url(background.jpg)      /* image */
     padding-box              /* origin */
     top center 300px 300px   /* position & size */
     no-repeat                /* repeat */
}

Этот пример содержит каждое из различных свойств, которые мы можем применить к фону. Давайте теперь рассмотрим их…

Свойства фона

Фон элемента может быть изменен с помощью каждого из этих свойств:

• background-attachment
• background-color
• background-clip
• background-image
• background-origin
• background-position
• background-repeat
• background-size

background-attachment

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

Мы можем использовать любое из трех значений: scroll, fixed и local.

scroll — это поведение по умолчанию. Фон будет прокручиваться вместе со страницей.

fixed прикрепляет фон к области просмотра, так что прокрутка не влияет на фон:

Это часто используется для достижения эффекта параллакса.

local — новый для CSS3, он заставляет фон элемента быть прикрепленным к самому элементу. Это устраняет неожиданное поведение при работе с фоном внутри поля прокрутки на странице.

Цвет фона

Свойство background-color не требует пояснений. Оно изменяет цвет фона, принимая значение цвета, это может быть ключевое слово color, значение rgb или hsl:

Посмотрите мою статью, чтобы узнать о работе с цветами.

Фон-клип

Мы можем использовать background-clip для создания некоторых эффектов. Он позволяет выбрать область, используемую фоном. Мы можем использовать следующие значения:

Background-image

Свойство background-image применяет графику к фону элемента.

Мы указываем местоположение нашего изображения с помощью URL, как показано ниже:

Мы можем использовать относительный путь (как указано выше) или полный веб-адрес, если он расположен извне.

Background-origin

С помощью background-origin мы можем выбрать, где применить фон. Это очень похоже на background-clip, только вместо обрезки фона изменяется его размер.

По умолчанию фон применяется ко всему элементу (включая подложку) с помощью padding-box. Мы также можем установить фон для всего элемента, включая границу, с помощью border-box, или для элемента без подкладки с помощью content-box.

Мы часто используем background-size: cover и background-repeat: no-repeat с этим свойством. Чтобы предотвратить повторение фонового изображения под любыми границами или подкладками. Подробнее об этом позже.

Background-position

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

Мы можем задать значения, используя ключевые слова left, right & center для оси X (горизонтальной) и top или bottom для оси Y (вертикальной):

Значения по умолчанию — 0 0. Это помещает фоновое изображение в левый верхний угол контейнера.

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

Здесь первое значение — горизонтальная позиция, второе — вертикальная. Так 100px 50px переместит изображение на 100px вправо и на 50px вниз. Значения могут быть заданы в px, em или в любом другом допустимом значении длины CSS.

Мы также можем использовать проценты:

Перемещение фонового изображения на процент означает, что точка X% изображения будет выровнена по точке X% контейнера. Так, 50% выровняет середину изображения с серединой контейнера. 100% выровняет последний пиксель изображения с последним пикселем контейнера.

Фоновый повтор

При использовании изображения, которое меньше фона, вы можете задать его поведение с помощью свойства background-repeat, например, так:

Возможными значениями этого свойства являются:

Мы также можем применить различные значения к нашим осям в одной строке:

Первое значение — горизонтальная ось, второе — вертикальная.

Background-size

Последнее свойство фона — background-size, и оно, пожалуй, одно из самых полезных! Мы можем использовать 3 ключевых слова: auto, cover и contain, причем auto используется по умолчанию.

auto браузер автоматически рассчитывает размер на основе фактического размера изображения, сохраняя его соотношение сторон.

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

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

Дополнительно можно указать значение length, которое задает ширину фонового изображения (высота будет автоматической):

Если вы укажете второе значение, то первое будет шириной, а второе — высотой:

Примечание: Можно использовать любые единицы измерения CSS, включая px, %, ems, vh, vw и т.д.

Несколько фоновых изображений

Вы также можете комбинировать любые из вышеперечисленных методов и применять их к нескольким изображениям, просто добавляя запятые между каждым из них:

В этом примере наше первое изображение имеет размер 500×100 пикселей, оно расположено над вторым изображением, которое покрывает всю область.

При использовании нескольких изображений для фона важно помнить о порядке укладки. Каждое значение соответствует слою: первое — это верхний слой, второе — второй слой и так далее. Если задан цвет фона, он всегда будет последним слоем.

Сводка

Вот и все! Мы рассмотрели каждое из свойств фона, с которыми можно работать в CSS. С этими знаниями вы сможете создать несколько уникальных макетов & раскройте свой внутренний творческий потенциал!

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

• Портфолио

• Twitter

• LinkedIn

• Hashnode

• Devto

• Medium

• Github

• Codepen