Фон CSS (свойство background)

Фон CSS (свойство background)

Свойства фона CSS background используются для определения стилей фона элементов.

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

CSS предоставляет несколько свойств для стилизации фона элемента, например: background-color, background-image, background-repeat, background-attachment и background-position. В следующем разделе описывается, как использовать эти свойства для установки различных стилей для фона.

Фоновый цвет

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

Пример ниже демонстрирует, как установить цвет фона веб-страницы.

body {
  background-color: #f0e68c;
}

Цвета в CSS чаще всего задаются следующими методами:

  • значение HEX - например, "#ff0000"
  • значение RGB - например, "rgb(255,0,0)"
  • название цвета на английском языке - например "red"

Фоновое изображение

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

Пример ниже демонстрирует как установить фоновое изображение для страницы.

body {
  background-image: url("image.jpg");
}

Повторение изображения фона

По умолчанию свойство background-image повторяет изображение как по горизонтали, так и по вертикали.

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

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

body {
  background-image: url("image.jpg");
  background-repeat: repeat-x;
}

Свойство background-attachment

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

body {
  width: 250px;
  height: 200px;
  overflow: scroll;
  background-image: url("image.jpg");
  background-attachment: fixed;
}

Расположение фона

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

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

body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
}

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

body {
  background-image: url("image.jpg");
  background-repeat: no-repeat;
  background-position: 100% top;
}

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

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

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

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

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

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

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

background: color image repeat attachment position;

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

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*