Атрибут background тега <body> — фонове зображення
Атрибут background вказує фонове зображення для документа.
Для нього не потрібно вказувати ширину та висоту, бо зображення займає весь простір вікна. Якщо зображення меньше розміру вікна браузера, тоді воно повторюється праворуч і вниз. Тому треба дбати про те, щоб краї зображення при складанні "мозаїки" були без видимих країв.
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<body background="URL">Атрибут background може отримувати єдине значення:
-
URL -
URL-адреса фонового зображення. Можливі значення:
- Абсолютний URL - вказує на інший сайт (як href=http://www.example.com/bgimage.gif).
- Відносний URL - вказує на файл в межах веб-сайту (як href="/images/bgimage.gif").
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1 | ≤4 | 15 | 12 | ≤11 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | ≤3.2 |
Приклади
+ запропонувати свій приклад у пісочниці
Тло всієї сторінки задано атрибутом background — картинка викладається плиткою у власному розмірі, і керувати цим нічим. Другий блок бере той самий файл через CSS: background-size: cover вписує його цілком, background-repeat: no-repeat прибирає повтор.
HTML
<!doctype html>
<html lang="uk">
<head><meta charset="utf-8"></head>
<body background="data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'><rect%20width='40'%20height='40'%20fill='gold'/><circle%20cx='20'%20cy='20'%20r='8'%20fill='teal'/></svg>">
<div class="card">
<p><b>Атрибут <code>background</code> на <code><body></code></b>: картинка 40×40 повторюється по всій сторінці. Розмір, положення й повтор задати неможливо.</p>
</div>
<div class="modern">
<p><b>Той самий файл, але в CSS</b>: <code>background-size: cover</code> і <code>background-repeat: no-repeat</code>.</p>
</div>
</body>
</html>CSS
body { font: 16px/1.6 system-ui, sans-serif; margin: 12px; color: #111; }
.card, .modern { padding: 12px; margin-bottom: 14px; border: 1px solid #333; }
.card { background: rgba(255, 255, 255, 0.88); }
.modern {
background-color: #036;
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><rect width='40' height='40' fill='gold'/><circle cx='20' cy='20' r='8' fill='teal'/></svg>");
background-size: cover;
background-repeat: no-repeat;
color: #fff;
text-shadow: 0 1px 3px #000;
min-height: 90px;
}Найпростіший приклад використання HTML атрибута background теґа <body>
<body background="https://picsum.photos/500/500">
<p>Атрибут <code>background</code> вказує фонове зображення для документа. Для нього не потрібно вказувати ширину та висоту, бо зображення займає весь простір вікна. Якщо зображення меньше розміру вікна браузера, тоді воно повторюється праворуч і вниз. Тому треба дбати про те, щоб краї зображення при складанні "мозаїки" були без видимих країв.</p>Різниця між HTML 4.01 та HTML5
Атрибут background для тега <body> не підтримується у HTML5. Користуйтесь для цього CSS.
Коментарі
Коментарів ще немає — будьте першим!