HTML Фонові зображення
Фонове зображення можна вказати майже для будь-якого елемента HTML.
Фонове зображення на елементі HTML
Щоб додати фонове зображення до елемента HTML, використовуйте HTML атрибут style та CSS властивість background-image:
Приклад
Додайте фонове зображення до елемента HTML:
<div style="background-image: url('img_girl.jpg');">
Спробуйте самі »
Ви також можете вказати фонове зображення в елементі <style> у розділі <head>:
Приклад
Вкажіть фонове зображення в елементі <style>:
<style>
div {
background-image: url('img_girl.jpg');
}
</style>
Спробуйте самі »
Фонове зображення на сторінці
Якщо ви хочете, щоб вся сторінка мала фонове зображення, ви повинні вказати фонове зображення в елементі <body>:
Приклад
Додайте фонове зображення для всієї сторінки:
<style>
body {
background-image: url('img_girl.jpg');
}
</style>
Спробуйте самі »
Повторення фону
Якщо фонове зображення менше елемента, зображення буде повторюватися по горизонталі та вертикалі, поки не досягне кінця елемента:
Приклад
<style>
body {
background-image: url('../images/example_img_girl.jpg');
}
</style>
Спробуйте самі »
Щоб уникнути повторення фонового зображення, встановіть для властивості background-repeat значення no-repeat.
Приклад
<style>
body {
background-image: url('../images/example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
Спробуйте самі »
Фон обкладинки
Якщо ви хочете, щоб фонове зображення охоплювало весь елемент, ви можете встановити для властивості background-size значення cover
Також, щоб увесь елемент був завжди покритий, встановіть для властивості background-attachment значення fixed:
Таким чином, фонове зображення покриє весь елемент, не розтягуючись (зображення збереже початкові пропорції):
Приклад
<style>
body {
background-image: url('../images/img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
Спробуйте самі »
Розтяжка фону
Якщо ви хочете, щоб фонове зображення розтягувалось, щоб вмістити весь елемент, ви можете встановити для властивості background-size значення 100% 100%:
Спробуйте змінити розмір вікна браузера, і ви побачите, що зображення розтягнеться, але завжди охоплює весь елемент.
Приклад
<style>
body {
background-image: url('../images/img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% 100%;
}
</style>
Спробуйте самі »
Дізнатися більше про CSS
З наведених вище прикладів ви дізналися, що фонові зображення можна стилізувати за допомогою CSS властивостей фону.
Щоб дізнатися більше про фонові CSS властивості, прочитайте розділ CSS Фон на нашому сайті W3Schools українською.
Запитання для самоконтролю
- Як додати фонове зображення до HTML-елемента?
- Який атрибут використовується для додавання фонового зображення?
- Яка CSS-властивість використовується для додавання фонового зображення?
- Де потрібно вказати шлях до фонового зображення, щоб вся сторінка мала фонове зображення?
- Як відображатиметься на вебсторінці фонове зображення, якщо воно менше HTML-елемента?
- Яке значення потрібно встановити для властивості background-repeat, щоб уникнути повторення фонового зображення?
- Яке значення потрібно встановити для властивості background-size, щоб фонове зображення охоплювало весь HTML-елемент?
- Яке значення потрібно встановити для властивості background-attachment, щоб увесь HTML-елемент був завжди покритий?
- Яке значення потрібно встановити для властивості background-size, щоб фонове зображення розтягувалось, щоб вмістити весь HTML-елемент?
