В этой главе вы узнаете, как установить фон различных элементов HTML. Вы можете установить следующие свойства фона элемента —
-
Свойство background-color используется для установки цвета фона элемента.
-
Свойство background-image используется для установки фонового изображения элемента.
-
Свойство background-repeat используется для управления повторением изображения в фоновом режиме.
-
Свойство background-position используется для управления положением изображения на заднем плане.
-
Свойство background-attachment используется для управления прокруткой изображения в фоновом режиме.
-
Свойство background используется в качестве краткого обозначения для указания ряда других свойств фона.
Свойство background-color используется для установки цвета фона элемента.
Свойство background-image используется для установки фонового изображения элемента.
Свойство background-repeat используется для управления повторением изображения в фоновом режиме.
Свойство background-position используется для управления положением изображения на заднем плане.
Свойство background-attachment используется для управления прокруткой изображения в фоновом режиме.
Свойство background используется в качестве краткого обозначения для указания ряда других свойств фона.
Установите цвет фона
Ниже приведен пример, который демонстрирует, как установить цвет фона для элемента.
<html> <head> </head> <body> <p style = "background-color:yellow;" > This text has a yellow background color. </p> </body> </html>
Это даст следующий результат —
Установить фоновое изображение
Мы можем установить фоновое изображение, вызывая локальные сохраненные изображения, как показано ниже —
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
<html>
Это даст следующий результат —
Повторите фоновое изображение
В следующем примере показано, как повторить фоновое изображение, если изображение маленькое. Вы можете использовать значение no-repeat для свойства background-repeat, если не хотите повторять изображение, в этом случае изображение будет отображаться только один раз.
По умолчанию свойство background-repeat будет иметь значение repeat .
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Это даст следующий результат —
В следующем примере показано, как повторить фоновое изображение по вертикали.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-y;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Это даст следующий результат —
В следующем примере показано, как повторить фоновое изображение по горизонтали.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Это даст следующий результат —
Установите положение фонового изображения
В следующем примере показано, как установить положение фонового изображения на расстоянии 100 пикселей от левой стороны.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Это даст следующий результат —
В следующем примере показано, как установить положение фонового изображения на расстоянии 100 пикселей от левой стороны и 200 пикселей от верхней части.
<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-position:100px 200px;
}
</style>
</head>
<body>
<p>Tutorials point</p>
</body>
</html>
Это даст следующий результат —
Установить фоновое вложение
Фоновое вложение определяет, является ли фоновое изображение фиксированным или прокручивается с остальной частью страницы.
В следующем примере показано, как установить фиксированное фоновое изображение.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Это даст следующий результат —
В следующем примере показано, как установить прокручиваемое фоновое изображение.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('/css/images/css.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-attachment:scroll;
}
</style>
</head>
<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
Это даст следующий результат —
Сокращенное Свойство
Вы можете использовать свойство background, чтобы установить все свойства фона одновременно. Например —