Атрибут bgproperties тега <body> — фіксоване тло сторінки
автор: с3с
Загальний опис
автор: NagarD
Синтаксис
<body bgproperties="fixed">Атрибут bgproperties може отримувати єдине значення:
-
fixed -
Блокує зміщування фону сторінки.
автор: с3с
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| - | - | - | - | 12+ | 2+ |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| - | - | - | - |
Приклади
+ запропонувати свій приклад у пісочниці
Три однакові блоки з прокруткою й тим самим візерунком — різниця лише в значенні background-attachment. Прокрутіть кожен усередині: при scroll малюнок стоїть відносно блока, при local їде разом із текстом, при fixed не рухається взагалі. Унизу — старий запис атрибутом, наведений як текст: у розмітці сторінки він виглядав би саме так і не робив би нічого.
HTML
<p class="head">background-attachment: scroll (типове)</p>
<div class="korobka scroll">
<p>Прокрутіть цей блок. Візерунок прибитий до самого блока: усередині
він не рухається, але поїде, якщо прокрутити сторінку.</p>
<p class="dovhyi">…</p>
</div>
<p class="head">background-attachment: local</p>
<div class="korobka local">
<p>Прокрутіть цей блок. Візерунок прибитий до ВМІСТУ: він їде разом
із текстом, як приклеєний до аркуша.</p>
<p class="dovhyi">…</p>
</div>
<p class="head">background-attachment: fixed</p>
<div class="korobka fixed">
<p>Прокрутіть цей блок. Візерунок прибитий до вікна й не рухається
ні від прокрутки блока, ні від прокрутки сторінки.</p>
<p class="dovhyi">…</p>
</div>
<p class="head bad">А так це писали атрибутом — і так воно не працює</p>
<pre class="kod"><body background="uzor.png" bgproperties="fixed"></pre>
<p class="note">Рядок вище нічого не змінює в жодному сучасному переглядачі:
фон однаково поїде разом зі сторінкою. Перевірено — background-attachment
лишається scroll.</p>CSS
.head {
margin: 20px 0 6px;
color: #5a6472;
font: 600 14px/1.4 system-ui, sans-serif;
text-transform: uppercase;
letter-spacing: .04em;
}
.head.bad {
color: #c0392b;
}
.korobka {
max-width: 420px;
height: 130px;
padding: 10px 12px;
overflow: auto;
border: 1px solid #b9c6d8;
border-radius: 6px;
background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='40'%20height='40'%3E%3Crect%20width='40'%20height='40'%20fill='%23f6f9ff'/%3E%3Ccircle%20cx='20'%20cy='20'%20r='9'%20fill='%23c9dcf5'/%3E%3C/svg%3E");
}
.scroll {
background-attachment: scroll;
}
.local {
background-attachment: local;
}
.fixed {
background-attachment: fixed;
}
.korobka p {
margin: 0 0 10px;
}
.dovhyi {
height: 220px;
}
.kod {
max-width: 420px;
margin: 0;
padding: 8px 10px;
overflow-x: auto;
border: 2px dashed #d64545;
border-radius: 6px;
background: #fff4f4;
color: #c0392b;
font: 14px/1.5 ui-monospace, monospace;
}
.note {
max-width: 420px;
margin-top: 10px;
color: #5a6472;
font-size: .9em;
}Найпростіший приклад використання HTML атрибута bgproperties теґа <body>
HTML
<body background="https://picsum.photos/500/500" bgproperties="fixed">
<p id="a" >HTML — це не мова програмування, це мова розмітки, яка каже вашому браузеру, як відображати вміст веб-сторінки, яку ви переглядаєте. Вона може бути простою чи складною, залежно від бажання веб-дизайнера, який її створює. HTML складається з серії (елементів), які використовуються для вміщення, або "загортання" в них різних частин контенту, щоб вони відображалися чи діяли в певний спосіб. Ці елементи за допомогою початкови і кінцевих (тегів) можуть зробити слово чи зображення посиланням на будь-яку іншу сторінку, можуть відображати текст курсивом, збільшити чи зменшити шрифт тощо. </p>
<table height="2000"><tr><td></td></tr></table>CSS
body{
background-attachment: fixed;
}
#a{
color:red;
}Різниця між HTML 4.01 та HTML5
Атрибут bgproperties тегу <body> не підтримується у HTML5.
Коментарі
Коментарів ще немає — будьте першим!