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;
}

<p>Фонове зображення для цієї сторінки додане за допомогою правила: <br><code>background-image: url('шлях до зображення');</code></p>

* {
	box-sizing: border-box;
}
	
body {
	font-family: monospace;
	line-height: 1.5;
	font-size: 16px;
	padding: 16px 16px 0 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='750' height='750' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: cover;
}

p {
	background-color: #F12668;
	color: #fff;
	padding: 8px;
	margin-top: 15%;
}

p code {
	text-shadow: 3px 3px 3px #4f4f4f;
	color: #f1f1f1;
}

<div class="box">

<p>У цьому прикладі, Ви можете змінювати значення для властивості <strong>background-image</strong>.</p>

<p>Властивість background-image встановлює у якості фону зображення або градієнт. У цьому прикладі Ви мусите вибрати форму градієнту, а також два кольори (які будуть змішуватися). Ми будемо використовувати лінійний градієнт, але Ви можете використуватися будь-який інший Вам відомий.</p>

<strong>background-image: linear-gradient(</strong>
<select class="input" id="select">
  <option value="to top" name="value2" selected>to top</option>
  <option value="to left" name="value2">to left</option>
  <option value="to right" name="value2">to right</option>
  <option value="to bottom" name="value2">to bottom</option>
  <option value="to right" name="value2">to right</option>
  <option value="to top right" name="value2">to top right</option>
  <option value="45deg" name="value2">45deg</option>
</select>,
<input type="color" class="input" id="color1" value="#32321A">,
<input type="color" class="input" id="color2" value="#F74C32">
<strong>);</strong>
  
</div>

* {
  box-sizing: border-box;
}

body {
  font-family: monospace;
  font-size: 16px;
  line-height: 1.45;
  height: 100vh;
  padding: 16px;
  background-image: linear-gradient( to top, #32321A, #F74C32 );
  background-size: cover;
  background-repeat: no-repeat;
}

.box {
  background-color: #fff;
  padding: 16px;
}

.input {
  margin-bottom: 36px;
  width: 75px;
}

#select {
  position: relative;
  top: -4px;
  width: 100px;
}

document.querySelectorAll('.input').forEach((el) => el.addEventListener('change', function () {
  var sel = document.querySelector('#select').selectedOptions[0].textContent;
  var col1 = document.querySelector('#color1').value;
  var col2 = document.querySelector('#color2').value;
  document.querySelectorAll('body').forEach((n) => n.style.setProperty('background-image', 'linear-gradient(' + sel + ',' + col1 + ',' + col2 + ')'));
}));

<div class="box first">Вуаль указана першою — вона зверху, смуги приглушені</div>

<div class="box second">Вуаль указана другою — вона під смугами й не видно її взагалі</div>

.box {
    width: 280px;
    padding: 20px;
    margin-bottom: 12px;
    border: 1px solid #666;
    font-weight: bold;
}

.first {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8)),
        repeating-linear-gradient(45deg, #2b6cb0 0 12px, #90cdf4 12px 24px);
}

.second {
    background-image:
        repeating-linear-gradient(45deg, #2b6cb0 0 12px, #90cdf4 12px 24px),
        linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8));
}

<div class="animate-area"><p>Щоб ти розумів, це не ґіфка</p></div>

.animate-area	{
    width: 560px;
    height: 190px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='40'%3E%3Cpath d='M4 20 22 8 30 20 44 6 56 22 30 34Z' fill='%23264653'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='70' height='70'%3E%3Ccircle cx='35' cy='42' r='24' fill='%232a9d8f'/%3E%3Ccircle cx='24' cy='18' r='9' fill='%232a9d8f'/%3E%3Ccircle cx='46' cy='18' r='9' fill='%232a9d8f'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='190'%3E%3Crect width='200' height='190' fill='%23a8dadc'/%3E%3Cellipse cx='60' cy='50' rx='40' ry='18' fill='%23fff'/%3E%3Cellipse cx='150' cy='115' rx='45' ry='20' fill='%23fff'/%3E%3C/svg%3E");
    background-position: 20px -90px, 30px 80px, 0px 0px;
    background-repeat: no-repeat, no-repeat, repeat-x;
}

@keyframes animatedBird {
    from { background-position: 20px 20px, 30px 80px, 0 0; }
    to { background-position: 300px -90px, 30px 20px, 100% 0; }
}
		
.animate-area	{ 
    animation: animatedBird 4s linear infinite;
}

p {
    text-align: center;
    font-size: 1.2em;
}

<h1>Ось, дивись, що ти можеш зробити тлом елемента.</h1><div class="img"><p>Тло картинкою</p></div>
  <div class="linear-gradient"><p>Тло лінійним градієнтом</p></div>
  <div class="radial-gradient"><p>Тло радіальним градієнтом</p></div>

div {
  width: 300px;
  height: 200px;
  margin: 25px auto;
  padding: 12px;
  border: 1px solid #1D212D;
  display:inline-block;
}

h1 {
  text-align: center;
}

p {
  color: #fff;
  text-align: center;
  font-size:23px;
}

.img {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='224' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  
}

.linear-gradient {
  background-image: linear-gradient(black, red);
}

.radial-gradient {
  background: radial-gradient(circle, black, white);
}

body {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='15' cy='15' r='6' fill='%23e76f51'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1500' height='1000' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E");
  background-color: #cccccc;
}