Фон - CSS-хитрощі | Альманах CSS 2025

backgroundВластивість в CSS дозволяє контролювати фон будь-якого елементу (то , що фарби під зміст цього елемента). Це скорочена властивість, що означає, що вона дозволяє писати те, що було б декількома властивостями CSS в одному. Подобається це:

body ( background: url(sweettexture.jpg.webp) /* image */ top center / 200px 200px /* position / size */ no-repeat /* repeat */ fixed /* attachment */ padding-box /* origin */ content-box /* clip */ red; /* color */ )

background складається з восьми інших властивостей:

background-image
background-position
background-size
background-repeat
background-attachment
background-origin
background-clip
background-color

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

body ( background-color: red; background: url(sweettexture.jpg.webp); )

Фон буде прозорим, а не червоним. Виправлення це просто: просто визначте background-colorпісля backgroundабо просто скористайтесь скороченим написом (наприклад background: url(… ) red;)

Кілька фонів

CSS3 додав підтримку декількох фонів, які накладаються один на одного. Будь-яка властивість, пов’язана з фонами, може приймати список, відокремлений комами, наприклад:

body ( background: url(sweettexture.jpg.webp), url(texture2.jpg.webp) black; background-repeat: repeat-x, no-repeat; )

Кожне значення у списку, розділеному комами, відповідає шару: перше значення - верхній шар, друге значення - другий шар, а колір тла - завжди останній шар.

Рецепти

Дивіться Pen emBzRd Тімоті Міллера (@tjacobdesign) на CodePen.

Підтримка браузера

Підтримка різниться залежно від конкретних властивостей, і кожна відповідна стаття в "Альманасі" містить унікальні примітки щодо підтримки браузера. Основні одноколірні фони та одинарні зображення працюють скрізь, і все, що не підтримується, просто повертається до наступного найкращого, будь то зображення чи колір.