Фон CSS
Свойство фона CSS используется для определения фоновых эффектов для элемента. Есть 5 свойств фона CSS, которые влияют на элементы HTML:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1) background-color
Свойство background-color используется для указания цвета фона элемента.
Вы можете установить цвет фона следующим образом:
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
h2, p {
background-color: #b0d4de;
}
</style>
</head>
<body>
<h2>Моя первая CSS-страница.</h2>
<p>Это пример цвета фона CSS.</p>
</body>
</html>
2) background-image
Свойство background-image используется для установки изображения в качестве фона элемента. По умолчанию изображение покрывает весь элемент. Вы можете установить фоновое изображение для страницы, как это.
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-image: url("image.png");
margin-left:100px;
}
</style>
</head>
<body>
<h2>привет мир!</h2>
</body>
</html>
Примечание. Фоновое изображение следует выбирать в соответствии с цветом текста. Плохая комбинация текста и фонового изображения может быть причиной плохого дизайна и нечитаемости веб-страницы.
3) background-repeat
По умолчанию свойство background-image повторяет фоновое изображение по горизонтали и вертикали. Некоторые изображения повторяются только по горизонтали или по вертикали.
Фон выглядит лучше, если изображение повторяется только по горизонтали.
background-repeat: repeat-x;
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-image: url("image.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h2>привет мир!</h2>
</body>
</html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
background-image: url("image.png");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<h2>привет мир!</h2>
</body>
</html>
4) background-attachment
Свойство background-attachment используется для указания, является ли фоновое изображение фиксированным или прокручивается вместе с остальной частью страницы в окне браузера. Если вы установите фиксированное фоновое изображение, то изображение не будет двигаться во время прокрутки в браузере. Возьмем пример с фиксированным фоновым изображением.
background-repeat: no-repeat;
background-attachment: fixed;
5) background-position
Свойство background-position используется для определения начального положения фонового изображения. По умолчанию фоновое изображение размещается в левом верхнем углу веб-страницы.
Вы можете установить следующие положения:
1. center
2. top
3. bottom
4. left
5. right
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
