Руководство по свойству background в CSS

Фон (background) играет важную роль в визуальном представлении веб-страницы.

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

Доступные свойства: background-color, background-image, background-repeat, background-attachment и background-position.

Теперь рассмотрим каждое из этих свойств подробнее.

Свойство background-color

Свойство background-color используется для установки цвета фона элемента.

В следующем примере показано, как установить цвет фона всей страницы.

body {
    background-color: #f0e68c;
}

Цветовые значения в CSS чаще всего указываются в следующих форматах:

• название цвета — как red
• значение HEX — например, #ff0000
• значение RGB — например, rgb (255, 0, 0)

Подробнее от этом в Руководстве по color в CSS.

Свойство background-image

Свойство background-image устанавливает изображение в качестве фона HTML-элемента.

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

body {
    background-image: url("images/tile.png");
}

Свойство background-repeat

Свойство background-repeat позволяет вам контролировать, как фоновое изображение повторяется или выкладывается на фоне элемента. Вы можете установить повторение фонового изображения по вертикали (ось Y), по горизонтали (ось X), в обоих направлениях или отменить повторение.

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

body {
    background-image: url("images/gradient.png");
    background-repeat: repeat-x;
}

Точно так же вы можете использовать значение repeat-y, чтобы повторять фоновое изображение по вертикали вдоль оси y, или значение no-repeat, чтобы полностью предотвратить повторение.

body {
    background-image: url("images/texture.png");
    background-repeat: no-repeat;
}

Посмотрим на следующую иллюстрацию, чтобы понять, как на самом деле работает это свойство.

Свойство background-position

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

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

body {
    background-image: url("images/robot.png");
    background-repeat: no-repeat;
}

В следующем примере фоновое изображение расположено в верхнем правом углу.

body {
    background-image: url("images/robot.png");
    background-repeat: no-repeat;
    background-position: right top;
}

Помимо ключевых слов, вы также можете использовать процент или численные значения, такие как px или em для этого свойства.

Посмотрим на следующую иллюстрацию, чтобы понять, как на самом деле работает это свойство.

Свойство background-attachment

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

Посмотрим следующий пример, чтобы понять, как это в основном работает:

body {
    background-image: url("images/bell.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
}

Сокращенное свойство background

Как видно из приведенных выше примеров, при работе с фоном (background) необходимо учитывать множество свойств. Однако их можно указать в одном отдельном свойстве, чтобы сократить код или избежать дополнительной типизации. Это называется сокращенным свойством.

Свойство background является кратким свойством для установки всех отдельных свойств фона, а именно: background-color, background-image, background-repeat, background-attachment и background-position в одном. Давайте посмотрим, как это работает:

body {
    background-color: #f0e68c;
    background-image: url("images/smiley.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 250px 25px;
}

Используя сокращенную запись, приведенный выше пример можно записать в виде:

body {
    background: #f0e68c url("images/smiley.png") no-repeat fixed 250px 25px;
}

При использовании сокращенного свойства background порядок значений свойств должен быть следующим:

background: color image repeat attachment position;

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