Передбачено кілька властивостей, які використовуються для маніпуляції фоновими зображеннями. На щастя властивість background використовується з усіма ними.
1 |
body |
2 |
background: white url(http://www.htmldog.com/images/bg.gif) no-repeat top right; |
3 |
Це включає в себе наступні властивості:
- background-color, з яким ми стикалися раніше.
- background-image, яке представляє собою місцезнаходження самого зображення.
- background-repeat, яке вказує, як зображення повторюється. Це може бути repeat — фактично еквівалент ефекту «мозаїки» по всьому фону; repeat-y — зображення повторюється по координатній осі Y, тобто зверху і знизу; repeat-x — зображення повторюється по координатній осі X, тобто слідує одне за одним зліва на право; no-repeat — зображення показується тільки один раз і не повторюється.
- background-position, показує розташування зображення. Це може бути top (зверху), center (по центру), bottom (знизу), left (ліворуч), right (праворуч) або будь-яка розсудлива їх комбінація.
Фонові зображення можуть використовуватися для більшості елементів HTML, а не тільки для сторінки повністю (body). Фонові зображення можуть використовуватися і для простих, але ефективних рішень – наприклад, для створення закруглених куточків.
Легко захопитися технікою фонових зображень і почати розміщувати їх по всій сторінці. Деякі візуально гіперактивні люди впевнені, що сторінка виглядає добре, коли яскраві кольорові фотографії накладаються одна на одну по всьому фону веб-сторінки, примушуючи користувача «розгадувати» текст на передньому плані. Це, звичайно ж, екстремальний приклад. Але факт полягає в тому, що найбільш дружній до користувача легкий для читання текст, набраний чорним кольором на білому фоні або білим кольором на простому чорному фоні (є також пропозиції злегка приглушати білий і чорний фон, щоб знизити відблиски).
Тому краще використовувати фонові зображення там, де на верхньому шарі не буде контенту, або робити фонові зображення дуже світлими, що, до речі, може зменшити вагу файлу зображення, тому що в цьому випадку задіяно менше кольорів (за умови, що ви застосовуєте формат з індексованої палітрою кольорів – наприклад, GIF).