Фонове зображення CSS - Як додати URL-адресу зображення до свого Div

Скажімо, ви хочете розмістити зображення або два на веб-сторінці. Один із способів - використовувати background-imageвластивість CSS.

Ця властивість застосовує одне або кілька фонових зображень до елемента, наприклад, як , як пояснюється в документації. Використовуйте його з естетичних міркувань, наприклад, додавши текстурований фон до вашої веб-сторінки.

Додайте зображення

За допомогою background-imageвластивості легко додати зображення . Просто вкажіть шлях до зображення у url()значенні.

Шлях до зображення може бути URL-адресою, як показано в прикладі нижче:

div { /* Background pattern from Toptal Subtle Patterns */ background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"); height: 400px; width: 100%; } 

Або це може бути локальний шлях. Ось приклад:

body { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("./images/oriental-tiles.png"); } 

Додайте кілька зображень

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

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; background-position: right, left; } 

Це багато коду. Давайте розберемо це.

Відокремте кожне url()значення зображення комою.

background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); 

Тепер розташуйте та покрастіть свої зображення, застосувавши додаткові властивості.

background-repeat: no-repeat, no-repeat; background-position: right, left; 

Існує кілька підвластивостей, які можна додати до фонових зображень, таких як background-repeatі background-position, які ми використовували у наведеному вище прикладі. Ви навіть можете додати градієнти до фонового зображення.

Подивіться, як це виглядає, коли ми складаємо все разом.

Питання замовлення

Порядок розміщення ваших зображень у питаннях через порядок укладання. Це означає, що перше вказане зображення є найближчим до користувача, згідно з документацією. Потім, наступний, і наступний тощо.

Ось приклад.

div { /* Background pattern from Toptal Subtle Patterns */ height: 400px; width: 100%; background-image: url("//amymhaddad.s3.amazonaws.com/morocco-blue.png"), url("//amymhaddad.s3.amazonaws.com/oriental-tiles.png"); background-repeat: no-repeat, no-repeat; } 

Ми вказали два зображення у коді вище. Перше зображення (morocco-blue.png) буде перед другим (oriental-tile.png). Обидва зображення мають однаковий розмір і не мають прозорості, тому ми бачимо лише перше зображення.

Але якщо ми перемістимо друге зображення (oriental-tile.png) праворуч на 200 пікселів, то ви зможете побачити його частину (решта залишається прихованою).

Ось як це виглядає, коли ми складаємо все разом.

Коли слід використовувати фонове зображення?

background-imageВласність має що сподобатися . Але є недолік.

Зображення може бути недоступне для всіх користувачів, зазначається в документації, як і для тих, хто використовує зчитувачі з екрана.

Це тому, що ви не можете додавати текстову інформацію до background-imageвластивості. Як результат, зображення буде пропущено читачами з екрану.

Використовуйте background-imageвластивість лише тоді, коли вам потрібно додати якусь прикрасу на вашу сторінку. В іншому випадку використовуйте елемент HTML, якщо зображення має значення або призначення, як зазначено в документації.

Таким чином, ви можете додати текст до елемента зображення, використовуючи altатрибут, який описує зображення. Наданий текст буде підхоплений читачами екрану.

Подумайте про це так: background-imageце властивість CSS, і CSS фокусується на презентації або стилі; HTML фокусується на семантиці або значенні.

Що стосується зображень, у вас є варіанти. Якщо для прикраси потрібне зображення, то background-imageмайно може бути хорошим вибором для вас.

Я пишу про те, як навчитися програмувати та про найкращі способи цього зробити ( amymhaddad.com).