CSS background-image
Свойство background-image задаёт изображение, используемое в качестве фона элемента.
По умолчанию изображение повторяется, чтобы покрыть весь элемент.
Примечание: Выбирайте фоновое изображение, которое не затрудняет чтение текста.
Фоновое изображение страницы
Изображение установлено как фон всей страницы.
Prompt
HTML-страница, которая задаёт фоновое изображение для всей страницы.
Во внутреннем блоке
<style> задайте body background-image равным url("paper.gif"). Добавьте заголовок и абзац. По умолчанию изображение повторяется, чтобы покрыть страницу.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page uses paper.gif as its background image.</p>
</body>
</html>
Неудачное сочетание
Показан неудачный подбор текста и фонового изображения, из-за которого текст трудно читать.
Prompt
HTML-страница, демонстрирующая неудачный выбор фонового изображения, из-за которого текст трудно читать.
Во внутреннем блоке
<style> задайте body background-image равным url("bgdesert.jpg"). Добавьте заголовок и абзац текста поверх него.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This busy background image makes the text hard to read.</p>
</body>
</html>
Фоновое изображение на абзаце
Фоновое изображение также можно задать на конкретном элементе, например на элементе <p>.
Prompt
HTML-страница, которая задаёт фоновое изображение для одного элемента, а не для страницы.
Во внутреннем блоке
<style> задайте background-image элемента <p> равным url("paper.gif"). Добавьте абзац, чтобы изображение получил только он.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Only this paragraph uses paper.gif as its background image.</p>
</body>
</html>
Свойство CSS Background Image
Свойство, рассматриваемое на этой странице, — background-image, которое задаёт фоновое изображение для элемента.