css властивість background-image

Властивість background-image встановлює для елемента один або кілька фонових малюнків, формату (PNG, SVG, JPG, GIF, WEBP), або градієнтів.

Тло можна встановити за допомогою функції url() в яку можна передати шлях до зображення, або закодовані дані:

background-image: url(../img/photo.png)

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

Ти також можеш використовувати фонове зображення для створення спрайтів, до прикладу скажу, що в бутстрапі всі іконки зроблені саме як спрайти. Це коли є одне велике зображення і воно нарізається через background-position на дрібні. Це ще більш корисний метод для зменшення кількості HTTP-запитів.

Також тло може бути задане через градієнти. З технічної точки зору, градієнти - це ще одна форма фонового зображення. Різниця полягає в тому, що браузер самостійно відмальовує (генерує) малюнок.

background-image: radial-gradient(circle, black, white);

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

Без задання, фонове зображення починається в лівому верхньому куті елемента і повторюється як по вертикалі, так і по горизонталі.

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

У разі наявності в малюнку прозорих областей, через них буде проглядатися колір тла, адже колір завжди йде останнім шаром. Задати колір тла можна наступним таким чином.

background: url(малюнок.jpg) blue;
// або
background-color: blue;

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

background: url(tlo-img1.png), url(tlo-img2.png);

Якщо ти використовуєi декілька фонових малюнків, пам'ятай про дещо не інтуїтивний порядку малюнків в стеку. В переліку вище, першим йде малюнок, що буде верхнім в стеку, а другим - останній.

Кілька фонових зображень зараз добре підтримуються (всі сучасні браузери та IE9 + для графічних зображень, IE10 + для градієнтів).

Якщо ви використовуєте декілька фонових зображень, можна встановити додаткові значення для кожного шару. Твоє скорочення буде виглядати приблизно так (комою, розділяється шар з його додатковими значеннями):

background:
    url(logo.png) bottom no-repeat,
    url(background-pattern.png) repeat;

Але це скорочений запис, він буде дорівнювати наступному:

background-imgage: url(logo.png), url(background-pattern.png);
background-repeat: no-repeat, repeat;
background-position: bottom;

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

правити

Нотатка

Тло елемента включає в себе загальний розмір елемента, відступи (padding) та кордони (border). І якщо ти зробиш кордони прозорими, то помітиш, що під ними є задане тло. Поведінку тла і меж, також, можна задати властивостями background-clip та background-origin. Межі визначені за допомогою властивості margin не будуть мати тла.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

background-image: url|none|initial|inherit;

Властивість background-image може отримувати 8 значень:

url

Шлях до зображення, котрий можна прописувати як у лапках так і без них.

Щоб вказати більше одного зображення, розділяй адреси комами.

автор: Svitlana

правити

none

Немає зображення для тла. Без задання.

автор: Svitlana

правити

initial

Встановлює властивість у значення без задання.

автор: Svitlana

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: Svitlana

правити

linear-gradient()

Встановлює лінійний градієнт як фонове зображення. Визначте щонайменше два кольори (зверху вниз).

автор: Svitlana

правити

radial-gradient()

Встановлює радіальний градієнт як фонове зображення. Визначте щонайменше два кольори (від центру до краю).

автор: Svitlana

правити

repeating-linear-gradient()

Повторює лінійний градієнт.

автор: Svitlana

правити

repeating-radial-gradient()

Повторює радіальний градієнт.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	3.5	12	4
одне тло	1.0	1.0	1.0	3.5		4.0
декілька тла	1.0	3.6	1.3	10.5		9.0

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1
одне тло	2.1		1.0	3.2
декілька тла	2.1		1.0	3.2

Приклади

+ запропонувати свій приклад у пісочниці

<div class="box">Тло з зображення: візерунок повторюється, аж поки не заповнить блок.</div>

.box {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%23eef6ff'/%3E%3Crect width='10' height='10' fill='%23cfe3f5'/%3E%3Crect x='10' y='10' width='10' height='10' fill='%23cfe3f5'/%3E%3C/svg%3E");
    padding: 24px;
}