background-image [wiki.hostingcloud.com.ua]

Эта страница только для чтения. Вы можете посмотреть её исходный текст, но не можете его изменить. Сообщите администратору, если считаете, что это неправильно.

====== background-image ======
задає фонове зображення елемента, адреса якого вказується аргументом функції url(). Це може бути як відносний, так і абсолютний шлях.
===== Фон =====
Варто відразу задати колір фону та фонове зображення, яке завжди буде розташоване поверх фону. Наприклад, у випадку коли зображення не завантажилося, користувач побачить хоча б колір фону, що виділяється, а не порожнє місце. Це особливо актуально, якщо в блоці є текст, колір якого не контрастує з основним кольором документа.
<code>
.hero {
	background-color: #2a2a2a;
	background-image: url(шлях до зображення);
}
</code>
===== Багатошаровий фон =====
Елементу можна задати кілька фонових зображень одночасно. Достатньо перерахувати їх у властивості background-image через кому. Для кожного зображення також можна задати значення інших властивостей фону, також через кому в кожній властивості. Першим прописуєтся те зображения що повиино буди найближче до глядача. Усі наступні параметри (відступи і т.д.) вказуются у тому ж порядку що й описані у background-image.
<code>
background-image: url(шлях до зображення 1), url(шлях до зображення 2);
background-size: 100px, cover;
background-position: top right, center;
background-repeat: repeat-x, no-repeat;
</code>
===== Лінійний градієнт =====
<code>
background-image: linear-gradient(
	to bottom, 
	rgba(255, 0, 0, 0.3), 
	rgba(255, 0, 0, 0.3)
	),
	url(шлях до зображення);
</code>
<code>
.linear {
 background-image: linear-gradient (to right bottom,blues, yellow)
}
</code>
Також можна вказати кількіссть пікселів скіольки якого кольору буде
===== Радіальний грдієнт =====
Єліптичний
<code>
.radial {
 background-image: radial-gradient (yellow, blues)
}
</code>
Круговий
<code>
.radial {
 background-image: radial-gradient (circle, yellow, blues)
}
</code>
<code>
.radial {
 background-image: radial-gradient (circle, yellow, blues)
}
</code>