Фон (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

Свойство 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;
}

Если для свойства background-position указаны два значения, первое значение представляет горизонтальную позицию, а второе вертикальную. Если указано только одно значение, второе значение принимает значение center.

Помимо ключевых слов, вы также можете использовать процент или численные значения, такие как 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;

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

Свойства фона не наследуются, как свойство color, но фон родительского элемента будет видимым из-за значения по умолчанию transparent свойства background-color.

Похожие посты

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

CSS-свойство opacity означает непрозрачность и теперь является частью спецификаций CSS3. Старые браузеры имеют разные способы управления непрозрачностью. Opacity в Firefox, Safari, Chrome, Opera и IE9 Вот самый простой синтаксис для назначения непрозрачности CSS во всех современных браузерах. Приведенное выше правило сделает элемент абзаца непрозрачным на 70% (или прозрачным на 30%). Свойство opacity принимает значение от…

Руководство по таблицам в CSS

Таблицы обычно используются для отображения каких-либо упорядоченных табличных данных. После того, как вы создали HTML-таблицу, с помощью CSS вы можете значительно улучшить ее внешний вид. CSS предоставляет несколько свойств, которые позволяют вам управлять компоновкой и представлением элементов таблицы. В этом разделе вы увидите, как использовать CSS для стилизации таблиц. Добавление границ (border) в таблицы CSS-свойство…

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

CSS-свойство margin позволяют вам установить интервал вокруг границы элемента (или края блока элемента, если у него нет определенной границы). На цвет элемента не влияет цвет фона background-color, он всегда прозрачен. Однако, если родительский элемент имеет цвет фона, он будет виден через область margin. Margin для отдельных сторон Вы можете установить margin для отдельных сторон используя…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.