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 показано як це можна зробити.

Синтаксис

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

url

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

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

none

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

initial

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

inherit

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

linear-gradient()

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

radial-gradient()

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

repeating-linear-gradient()

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

repeating-radial-gradient()

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

Переглядачі

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

Приклади

• Приклад 1
• Приклад 2
• Приклад 3
• Приклад 4
• Приклад 5
• Приклад 6

See the Pen Анімація за допомогою тла by Володимир (@NaharD) on CodePen.

.box {


  background: url(image.jpg);


}

Додаткові посилання