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>
自己尝试一下»
Повторення фону
Якщо фонове зображення менше елемента, зображення буде повторюватися по горизонталі та вертикалі, поки не досягне кінця елемента:
Щоб уникнути повторення фонового зображення, встановіть для властивості 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-елемент?
