| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 4.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Завдання
Розмістити шпалери в правий нижній кут веб-сторінки без його повторення.
Рішення
Для управління положенням фонового малюнка на сторінці застосовується стильове властивість background-position, воно одночасно встановлює координати зображення по горизонталі і вертикалі. Щоб скасувати повторення фонової картинки використовується властивість background-position зі значенням no-repeat. У той же час всі ці властивості можна замінити одним універсальним background, яке задає шлях до графічного файлу, положення картинки і спосіб її повторення, як показано в прикладі 1.
Додавання фонового малюнка до селектору body має одну особливість. Картинка буде розташовуватися не внизу сторінки, а внизу блоку з контентом, що особливо помітно при невеликому об'ємі тексту або збільшенні розмірів вікна браузера. Встановивши висоту 100% для селектора html, тим самим забезпечимо позиціонування фону в правому нижньому кутку вікна браузера.
Приклад 1. Стан фонової картинки
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Положення фонового малюнка</title>
<style>
html {
height: 100%; /* Висота сторінки */
}
body {
background:
url(images/tomatos.jpg) bottom right no-repeat; /* Шлях до файлу з зображенням, положення в правому нижньому куті та скасування повторення фону */
margin-right: 200px; /* Відступ праворуч */
}
</style>
</head>
<body>
<h1>Консерви з томатів</h1>
<p>Плоди відбирають з гарним рівним забарвленням, щільні і однорідні за розміром, укладають у банки і заливають киплячим розсолом (на 1 л води - 35 г кухонної солі і 6 г лимонної кислоти). Банки прикривають кришками і ставлять на прогрівання, витримуючи в киплячій воді: літрові - 5-8, трилітрові - 12-15 хв. Потім їх закупорюють і охолоджують.</p>
<p>Приблизні витрати сировини і продуктів на літрову банку: помідорів червоних добірних - 550-600 г, солі - 15 г, лимонної кислоти - 3 р.</p>
</body>
</html>
Результат цього прикладу показано нижче (рис. 1).
Рис. 1. Фонова картинка у правому нижньому куті вікна
В даному прикладі зображення позиціонується в потрібному місці за допомогою значень bottom right властивості background. Щоб текст не відображався поверх малюнка, праворуч на сторінці доданий відступ через margin-right. Саме зображення, яке використовувалося в поточному прикладі, зберігається у форматі JPEG і продемонстровано на рис. 2.
Рис. 2. Зображення для створення фону на веб-сторінці