Свойства фона 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;
Если значение для отдельного фонового свойства отсутствует или не указано при использовании сокращенной записи, вместо него будет использоваться значение по умолчанию для этого свойства, если оно есть.
Оставить комментарий