Фоновые изображения HTML
Фоновое изображение можно установить почти на любой элемент HTML.
Фоновое изображение на элементе HTML
Чтобы установить фоновое изображение на элемент, используйте атрибут style с CSS-свойством background-image. Также его можно задать в элементе <style> в <head>.
Встроенный способ
Фоновое изображение, заданное встроенным способом для абзаца.
Output: полная HTML-страница
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Встроенный фон</title>
</head>
<body>
<p style="background-image: url('img_girl.jpg');">У этого абзаца есть фоновое изображение.</p>
</body>
</html>
В элементе style
Фоновое изображение, заданное для всех абзацев в элементе <style>.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<p>У этого абзаца есть фоновое изображение.</p>
</body>
</html>
Фоновое изображение на странице
Чтобы задать фоновое изображение для всей страницы, установите background-image на элементе <body>.
Пример
Фоновое изображение для всей страницы.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>У этой страницы есть фоновое изображение.</p>
</body>
</html>
Повторение фона
Если фоновое изображение меньше элемента, оно повторяется по горизонтали и вертикали, пока элемент не заполнится. Чтобы это остановить, установите свойство background-repeat в no-repeat.
С повторением
Маленькое фоновое изображение, повторяющееся для заполнения страницы.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('example_img_girl.jpg');
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Фоновое изображение повторяется, заполняя страницу.</p>
</body>
</html>
Без повторения
То же изображение, настроенное без повторения.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Фоновое изображение не повторяется.</p>
</body>
</html>
Покрытие фона
Чтобы фоновое изображение покрывало весь элемент, установите background-size в cover. Установите background-attachment в fixed, чтобы элемент оставался покрытым. Изображение сохраняет пропорции и не растягивается.
Пример
Фоновое изображение, покрывающее всю страницу.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Фоновое изображение покрывает всю страницу.</p>
</body>
</html>
Растягивание фона
Чтобы фоновое изображение растягивалось и заполняло весь элемент, установите background-size в 100% 100%. Изменение размера окна растягивает изображение, но оно всегда покрывает элемент.
Пример
Фоновое изображение, растянутое для заполнения страницы.
Output: полная HTML-страница
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
</head>
<body>
<h1>Привет, мир!</h1>
<p>Фоновое изображение растягивается, заполняя страницу.</p>
</body>
</html>
Узнать больше о CSS
Эти примеры показывают, что фоновые изображения оформляются с помощью CSS-свойств фона. Чтобы узнать больше, изучите руководство PromptCookbook по CSS Background.