Как изменить цвет фона в CSS

Один из самых радостных моментов в карьере начинающего фронтендера — научиться менять цвет фона на веб‑странице.

Работать с HTML приятно, но всего несколькими строками CSS вы можете сделать страницы живыми. В этом руководстве объяснено всё необходимое: от базовой записи до приёмов для изображений, градиентов и оптимизации под мобильные устройства.

Подготовка

Небольшая предварительная настройка ускорит работу.

Важно: рекомендую Visual Studio Code с расширением Live Server — изменения в HTML/CSS будут видны сразу.

1. Создайте папку для файлов проекта.
2. Создайте файл index.html и добавьте базовую структуру: html, head и body.
3. Создайте файл styles.css для CSS.
4. Свяжите CSS с HTML, поместив в секцию head ссылку:

После этого можно переходить к редактированию CSS.

Связанная статья: Как создать boilerplate для сайта

Как изменить цвет фона с помощью CSS

Самый простой способ — применить стиль к тегу body и задать свойство background-color. Например:

body {
    background-color: rgb(191, 214, 255);
}

Этот код меняет фон на светло‑голубой.

Форматы цвета (кратко)

CSS принимает цвета в нескольких форматах. Один‑зрительно:

• name: lightskyblue — удобо для быстрой работы, но точность невысока
• hex: #bfd6ff — шестнадцатеричный код
• rgb: rgb(191, 214, 255)
• rgba: rgba(191, 214, 255, 1) — alpha для прозрачности
• hsl: hsl(218deg, 100%, 87%) — угловая и процентная запись
• hsla: hsla(218deg, 100%, 87%, 1)

Совет: hsl удобен при подборе оттенков и изменении яркости.

Пример с блоком и разными фонами

Создадим .container и .panel, чтобы показать раздельные фоны для страницы и элемента:

body {
    background-color: rgb(191, 214, 255);
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90vh;
}

.panel {
    background: rgb(255, 148, 148);
    height: 10rem;
    width: 30%;
}

.muo-text {
    font-size: 3em;
    font-weight: bolder;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    position: absolute;
}

Здесь фон body и фон .panel определяются независимо.

Шорткат background

Свойство background — это сокращение для набора фоновых свойств. Оно удобно, когда нужно задать несколько параметров в одной строке.

Градиенты

background также принимает градиенты: линейные и радиальные. Пример линейного градиента:

body {
  background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Градиенты полезны, когда нужно гладкое смешение цветов без загрузки изображений.

Как задать фоновое изображение в CSS

Если фон должен быть изображением, используйте background с url(). Поместите файл изображения в ту же папку, чтобы указать только имя файла, иначе укажите путь.

body {
  background: url(leaves-and-trees.jpg);
}

Если изображение выглядит «слишком увеличенным», исправьте это с помощью background-size:

body {
  background: url(leaves-and-trees.jpg);
  background-size: cover;
}

Для использования шортката background вместе с background-size требуется указать background-position и разделить их через / :

body {
  background: url(leaves-and-trees.jpg) top left / cover;
}

Теперь изображение корректно масштабируется и центрируется.

Важно: большие фоновые изображения замедляют загрузку, особенно на мобильных сетях. Оптимизируйте изображения, используйте формат WebP/AVIF и загружайте разные версии для разных разрешений.

Частые приёмы и лучшие практики

• Для контраста и доступности всегда проверяйте соотношение контрастности текста и фона.
• Используйте CSS переменные для единообразия цветов: –brand-bg: #bfd6ff; body { background: var(–brand-bg); }
• Для темной/светлой темы меняйте переменные через media (prefers-color-scheme) или класс на корневом элементе.
• Для больших декоративных изображений используйте lazy loading не для фоновых изображений CSS, а адаптивные техники (picture, img) или media queries, чтобы подставлять легкие фоны на мобильных.

Когда подход может не сработать

• background-image не даёт semantic-изображения: если изображение важно для содержимого, используйте тег img. В противном случае поисковые роботы и ассистивные технологии могут не заметить его.
• При использовании background: url() без указания размеров может произойти растяжение и пикселизация на больших экранах.
• На устаревших браузерах некоторые современные синтаксисы (например, conic-gradient) могут не поддерживаться.

Альтернативные подходы

• Inline‑стили:
  — подходят для быстрых тестов, но мешают поддерживаемости.
• Утилитарные классы (Tailwind): class=”bg-[#bfd6ff]” — быстро, особенно в командах.
• CSS‑переменные и темы: централизованное управление палитрой.

Ментальная модель: «слой — элемент — контент»

Думайте о странице как о слоях: фон (page layer), блоки (element layer), текст/контент. Меняя фон, учитывайте влияние на все верхние слои: читаемость, иерархию и акценты.

Чеклист по ролям

• Дизайнер: выбрал цветовую палитру, дал hex/hsl/пример в макете.
• Фронтенд‑разработчик: внедрил переменные, обеспечил адаптивность и оптимизацию изображений.
• QA: проверил контрастность, отображение в популярных браузерах и медленных сетях.

Полезные сниппеты (чит‑шит)

Мгновенно задать полупрозрачный фон:

.panel {
  background: rgba(255, 255, 255, 0.8);
}

Фон с фиксированным положением: полезно для декоративных фонов

body {
  background: url(leaves-and-trees.jpg) center / cover fixed no-repeat;
}

CSS‑переменные для тем:

:root {
  --bg: #ffffff;
  --text: #111111;
}
[data-theme="dark"] {
  --bg: #0b1220;
  --text: #f0f6ff;
}
body { background: var(--bg); color: var(--text); }

Производительность и доступность

• Оптимизируйте изображения: WebP/AVIF, сжатие, responsive‑images.
• Проверьте контрастность по WCAG (минимум 4.5:1 для обычного текста).
• Для декоративных фонов не забывайте обеспечить альтернативный контраст для текста.

Примечание: фон, заданный через CSS, не подменяется атрибутом alt — если изображение важно для понимания контента, используйте .

Критерии приёмки

• Фон корректно отображается на десктопе и мобильных разрешениях.
• Контрастность текста соответствует требованиям доступности.
• Файлы изображений оптимизированы и не приводят к значимому замедлению загрузки.

Краткое резюме

Изменение цвета фона в CSS — базовый, но мощный инструмент визуальной настройки страницы. Используйте background-color для простых целей, background для комплексных настроек, background-size и background-position для контроля изображений. Оптимизируйте ресурсы и проверяйте доступность.

Важно: всегда тестируйте на реальных устройствах и учитывайте пользователей с медленным интернетом.