Фони:
1.hero {
2 background-color: #1a1a2e;
3 background-image: url('hero.jpg');
4 background-size: cover; /* cover | contain | 100% 50% */
5 background-position: center;
6 background-repeat: no-repeat;
7 /* Скорочений запис: */
8 background: #1a1a2e url('hero.jpg') no-repeat center/cover;
9}Градієнти:
1/* Лінійний */
2.btn { background: linear-gradient(135deg, #667eea, #764ba2); }
3
4/* Радіальний */
5.circle { background: radial-gradient(circle, #fff 0%, #ccc 100%); }
6
7/* Декілька фонів */
8.multi {background:
url('icon.svg') no-repeat top right,
1linear-gradient(to bottom, #fff, #f0f0f0);
2}