Важно знать! Если вы работаете со старыми браузерами, имейте в виду: значение "inherit" просто не будет работать в IE7 и более ранних версиях.

Свойство background-color - это ваш главный инструмент для управления цветом фона элемента. Оно закрашивает всю внутреннюю площадь компонента, включая отступы (padding) и границы (border), но аккуратно обходит внешний отступ (margin).

Мелкий нюанс: По умолчанию фон не наследуется от родительского блока. Однако, благодаря тому, что дочерние элементы изначально имеют прозрачный фон, вы увидите сквозь них цвет родителя. Это создает эффект «сквозного» фона, который часто используют дизайнеры.

Устанавливать цвет можно по-разному: классическими именами цветов, шестнадцатеричными кодами или через RGB-синтаксис. В примере ниже мы наглядно покажем каждый из этих способов. А полный список всех доступных названий, их hex-значений и визуальных образцов вы найдете в .

Примечание: Интересный факт: если применить background-color к тегу , то цвет зальет абсолютно все окно браузера. Но если задать фон для тега , он будет покрывать только область с контентом (при условии, что этот контент существует).

Совет: Не ограничивайте себя одним цветом! Для более выразительного дизайна используйте фоновые изображения через свойство . Также не забудьте про свойство , которое позволяет точно определить, в какой именно части элемента должен отображаться фон.

Синтаксис и значения свойства

background-color: цвет|transparent|inherit;