Властивість фону CSS використовується для визначення фонових ефектів елемента. Існує 5 властивостей фону CSS, які впливають на елементи HTML:

1. Колір фону
2. фонове зображення
3. фоновий повтор
4. фон-прикріплення
5. фонове положення

1) Колір фону CSS

Властивість background-color використовується для визначення кольору фону елемента.

Ви можете встановити колір фону так:

 h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p> 

Вихід:

Моя перша сторінка CSS.

Привіт Javatpoint. Це приклад CSS background-color.

2) Фонове зображення CSS

Властивість background-image використовується для встановлення зображення як фону елемента. За замовчуванням зображення покриває весь елемент. Ви можете встановити фонове зображення для такої сторінки.

 body { background-image: url('paper1.webp'); margin-left:100px; } 

4) CSS background-attachment

Властивість background-attachment використовується для визначення того, чи фонове зображення є фіксованим, чи прокручується разом із рештою сторінки у вікні браузера. Якщо ви встановили фіксоване фонове зображення, то зображення не рухатиметься під час прокручування в браузері. Розглянемо приклад із фіксованим фоновим зображенням.

 background: white url('bbb.webp'); background-repeat: no-repeat; background-attachment: fixed; 

5) CSS background-position

Властивість background-position використовується для визначення початкової позиції фонового зображення. За умовчанням фонове зображення розміщується у верхньому лівому куті веб-сторінки.

Ви можете встановити такі позиції:

1. центр
2. зверху
3. дно
4. зліва
5. правильно

 background: white url('good-morning.webp'); background-repeat: no-repeat; background-attachment: fixed; background-position: center;