logo

TechCodeview

Фон CSS

Властивість фону 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(&apos;paper1.webp&apos;); margin-left:100px; }
Перевірте зараз

4) CSS background-attachment

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

 background: white url(&apos;bbb.webp&apos;); background-repeat: no-repeat; background-attachment: fixed;
Перевірте зараз

5) CSS background-position

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

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

  1. центр
  2. зверху
  3. дно
  4. зліва
  5. правильно
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center;
Перевірте зараз