Як додати зображення на тло css?

admin | 4 Квітня, 2025


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

  1. Встановіть фонове зображення для сторінки: body { background-image: url("paper.gif"); } …
  2. У цьому прикладі показано невдале поєднання тексту та фонового зображення. Текст важко прочитати: body { background-image: url("bgdesert.jpg"); …
  3. p { background-image: url("paper.gif"); } Спробуйте самі »

Властивість CSS background-image дозволяє розмістити зображення за будь-яким елементом HTML, який ви бажаєте. Це може бути або ціла сторінка (за допомогою селектора body в CSS, який націлений на елемент <body> у нашому HTML), або просто окрема певна частина сторінки, наприклад елемент розділу, як у прикладі нижче.

Щоб додати зображення, ми використовувати вбудований елемент <img>. За допомогою цього елемента HTML ми зможемо лише додати зображення, джерело та посилання. Потім за допомогою CSS ми зазначимо пропорції та інші необхідні стилі зображення.

Шлях фонового зображення відносно вашого css-файлу, отже якщо ваше зображення не знаходиться в тій самій папці, де знаходиться ваша таблиця стилів, то шлях, який ви вказали, не може бути знайдений. Якщо ви відкриєте інструменти розробника у своєму браузері (зазвичай, натиснувши F12 на клавіатурі), ви побачите вкладку під назвою «Мережа».

Щоб зберегти ваш фон фіксованим, прокручувати або локально в CSS, ми повинні використовувати властивість background-attachment. Background-attachment: ця властивість використовується в CSS для встановлення фонового зображення як фіксованого або прокручуваного. Типовим значенням цієї властивості є прокручування.

Синтаксис фонового зображення в CSS. Загальний синтаксис властивості фонового зображення CSS: background-image: url('path_to_your_image'); За допомогою цього синтаксису функція ' url() ' визначає шлях до зображення. Шлях зображення може бути абсолютним або відносним шляхом.