Изменить фон страницы с помощью CSS

Кратко

В этой статье — быстрый обзор способов задать фон страницы с помощью CSS: цвет, градиент, изображение, масштабирование и рекомендации по производительности. Подойдёт начинающим фронтендерам и тем, кто хочет чистый чек‑лист для работы с фоном.

Важно: все примеры предполагают, что у вас есть index.html и подключённый файл styles.css. Если вы не используете сборщик, положите файлы в одну папку.

Зачем это важно

Фон страницы — первая визуальная точка контакта с пользователем. Правильный фон улучшает читабельность, воспринимаемость бренда и общую эстетику интерфейса. При этом большие изображения и неправильные форматы могут замедлить загрузку, особенно на мобильных устройствах.

Установка

Следуйте этим шагам, чтобы настроить проект и сразу видеть изменения:

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

Совет: используйте Visual Studio Code и расширение Live Server для мгновенной перезагрузки при правках.

Основной способ: изменить цвет фона у body

Самый простой способ — задать свойство background-color для тега body.

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

Этот код выставит светло‑голубой фон. Свойство background-color принимает несколько форматов цвета:

• name — например, lightskyblue (название цвета, приближённое значение);
• hex — например, #bfd6ff;
• rgb — rgb(191, 214, 255);
• rgba — rgba(191, 214, 255, 1) где a — альфа (непрозрачность);
• hsl — hsl(218deg, 100%, 87%);
• hsla — hsla(218deg, 100%, 87%, 1) где a — альфа.

Определение: hexadecimal (hex) — шестнадцатеричный код цвета вида #RRGGBB; alpha — параметр прозрачности от 0 до 1.

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

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 принимает линейные и радиальные градиенты. Это сокращает количество HTTP‑запросов, потому что фон рисуется браузером.

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

Градиенты полезны, когда нужно плавно переходить между оттенками и сохранить производительность (в отличие от тяжёлых растровых изображений).

Фон‑изображение: базовый подход

Чтобы использовать картинку как фон, применяйте background или background-image. Если изображение в той же папке, можно указать только имя файла:

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;  
}

Пояснение: cover масштабирует изображение таким образом, чтобы оно заполнило весь контейнер, сохраняя соотношение сторон; часть изображения может обрезаться. contain масштабирует изображение целиком внутри контейнера, могут появиться пустые зоны.

Подбор форматов и оптимизация изображений

Примечание: большие по объёму фоновые изображения увеличивают время загрузки. Для веба лучше:

• использовать современные форматы (WebP, AVIF) там, где поддерживается;
• создавать responsive‑версии (например, 320/768/1366 px) и подгружать их через CSS или picture element;
• применять lazy loading для изображений контента, но фон обычно загружается сразу — планируйте это.

Важно: на мобильных сетях пользователи часто уходят, если страница грузится дольше 2–3 секунд.

Короткий шпаргалка по свойствам фона (Cheat sheet)

• background-color: задаёт цвет фона.
• background-image: url(…);
• background-position: положение (top, center, 50% 50%).
• background-size: cover | contain | auto | <ширина> <высота>.
• background-repeat: repeat | no-repeat | repeat-x | repeat-y.
• background-attachment: scroll | fixed | local.
• background: сокращённое свойство, собирает выше перечисленные.

Примеры использования в интерфейсе

• Сторонние панели: отдельный фон у .panel для контраста с общим фоном.
• Темы: менять background-color для light/dark‑тем.
• Баннеры: фон‑изображения с overlay — используйте псевдоэлемент ::before с градиентом и opacity для читаемости текста.

Пример overlay для читаемости текста

.hero {
  background: url(hero.jpg) center / cover no-repeat;
  position: relative;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0,0,0,0.35), rgba(0,0,0,0.35));
}
.hero .content {
  position: relative;
  z-index: 1;
}

Роли и чек‑лист перед релизом

Для команды — минимальный чек‑лист перед публикацией:

• Дизайнер: проверить контраст текста/фона (WCAG minimum 4.5:1 для обычного текста).
• Разработчик: оптимизировать изображения, проверить поддерживаемые форматы.
• Тестировщик: проверить на разных разрешениях и в медленных сетях.
• Продакт/менеджер: подтвердить визуальную консистентность с брендбуком.

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

• Фон корректно отображается на основных браузерах (Chrome, Firefox, Safari, Edge).
• Фоновое изображение не тормозит загрузку страницы (проверено Lighthouse / DevTools).
• Текст читается на фоне во всех состояниях (desktop, tablet, mobile).

Когда этот метод не подходит

• Если нужно динамически менять фон в зависимости от данных пользователя — лучше использовать CSS‑переменные и переключать их через JS.
• Если фон — интерактивный элемент (параллакс, canvas) — используйте соответствующие техники, а не простые CSS‑фоновые изображения.

Быстрые рекомендации и эвристики

• Используйте CSS gradients вместо больших изображений, когда это возможно.
• Для повторяемых текстур оставляйте маленькие файлы (tileable textures).
• Для больших экранов подглядывайте за retina‑дисплеями — готовьте версии в 2x, если нужно.

Заключение

Изменение фона в CSS — базовая, но важная навык для фронтендера. Умение выбрать между цветом, градиентом и изображением, а также оптимизировать ресурсы, влияет на восприятие и производительность сайта.

Ключевые шаги: подключите styles.css, выберите формат цвета или изображение, протестируйте на нескольких устройствах и оптимизируйте изображения для быстрой загрузки.

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

• Цвет фона задаётся через background-color или background.
• Градиенты позволяют обойтись без тяжёлых картинок.
• Для фоновых изображений используйте background-size: cover и оптимизируйте формат/размер.
• Проверяйте контраст и производительность перед релизом.