Как сделать фон сайту в 2026: цвет, картинка, градиент, видео

Фон сайту задают одним из пяти способов: сплошной цвет, картинка, градиент (плавный перелив цветов), повторяющийся паттерн или видео на первом экране. В коде за это отвечают свойства CSS background-color и background-image, а в конструкторах вроде Тильды фон настраивается кнопками в блоке. Ниже разберём каждый способ по шагам, покажем, где взять картинку (в том числе сгенерировать нейросетью), и как не сделать текст нечитаемым, а страницу медленной.

Какой фон выбрать: пять вариантов

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

• Сплошной цвет. Самый простой и быстрый вариант, ничего не грузится. Подходит для большинства страниц: белый или очень светлый фон под тёмный текст читается лучше всего.
• Изображение. Фотография или иллюстрация на первом экране (обложка, «герой»). Даёт настроение, но весит больше всего и чаще всего мешает читать текст поверх.
• Градиент. Плавный переход между двумя-тремя цветами. Ничего не грузится (рисуется кодом), выглядит современно, легко подобрать под бренд.
• Паттерн. Мелкая повторяющаяся текстура: точки, сетка, узор. Небольшая картинка размножается по всей странице, поэтому весит мало.
• Видео. Короткий ролик на фоне первого экрана. Самый тяжёлый вариант, требует аккуратной оптимизации, иначе страница будет открываться долго.

Практичное правило: чем важнее текст на блоке, тем спокойнее должен быть фон. Для основного содержимого берите цвет или лёгкий градиент, а яркую картинку и видео оставьте для верхнего экрана, где текста мало.

Как задать фон через код (CSS)

Если вы делаете сайт вайбкодингом или на чистом HTML, фон задаётся в CSS у нужного элемента (обычно body для всей страницы или отдельной секции). Разберём по шагам.

1. Сплошной цвет. Пишете body { background-color: #f6f1ec; }. Цвет задают в формате HEX (#f6f1ec), либо словом (white), либо через rgb().
2. Картинка. body { background-image: url('bg.jpg'); background-size: cover; background-position: center; }. Свойство cover растягивает картинку на весь блок без искажений, center центрирует её.
3. Градиент. body { background-image: linear-gradient(#6e4aff, #49a16c); } даёт переход сверху вниз. Можно задать угол: linear-gradient(135deg, ...).
4. Паттерн. Та же background-image: url('pattern.png'), но БЕЗ cover: по умолчанию маленькая картинка повторяется (background-repeat: repeat) и заполняет фон плиткой.
5. Слои вместе. Можно наложить градиент поверх фото, чтобы затемнить его под текст: перечислите их через запятую, первым идёт верхний слой.

Полный синтаксис свойств фона и рабочие примеры градиентов есть в официальной документации MDN про фон и границы и в разборе linear-gradient на Доке. Если вы собираете страницу с нуля, вся раскладка HTML и CSS подробно разобрана в статье про сайт на HTML.

Удобство вайбкодинга в том, что CSS можно не писать руками. Опишите нейросети словами: «сделай фон секции светло-бежевым с мягким градиентом к белому, текст поверх тёмный». ИИ подставит нужные свойства сам. Как формулировать такие запросы, показано в материале про создание сайта с ИИ через код.

По теме: Как сделать сайт-визитку в 2026: три способа и готовый промпт

Как поставить фон в конструкторе (Тильда и другие)

Если вы собираете сайт в конструкторе, код трогать не нужно, фон меняется в настройках блока. На примере Тильды, логика в большинстве конструкторов схожа.

1. Откройте настройки блока (шестерёнка) и найдите вкладку «Фон» или «Настройки».
2. Для цвета выберите его в поле «Цвет фона».
3. Для картинки зайдите в «Контент» блока-обложки и нажмите «Загрузить файл», выбрав изображение с компьютера.
4. Для видео вставьте в поле обложки ссылку на ролик в формате MP4 или webm.
5. Настройте затемнение: в полях «Цвет фильтра в начале» и «Цвет фильтра в конце» задаётся полупрозрачная плёнка поверх фото, чтобы текст читался.

Тильда рекомендует для обложки картинку формата jpg размером около 1680x900 px, в цветовой модели RGB, требования есть в справке Тильды по обложке. Подробный разбор самого конструктора, тарифов и сравнения с ИИ, в статье про сайт на Тильде.

Где взять картинку для фона

Своё фото подходит редко: у любительских снимков часто мало разрешения и много деталей, которые перебивают текст. Варианты, откуда взять фон:

• Бесплатные фотостоки. На Unsplash и Pexels можно скачивать снимки бесплатно, в том числе для коммерческих сайтов (условия лицензии всё равно проверяйте на самом сайте).
• Готовые градиенты и паттерны. Сервисы-генераторы дают код градиента или маленькую бесшовную текстуру, которую останется вставить в CSS или загрузить в конструктор.
• Сгенерировать нейросетью. Опишите картинку словами («абстрактный светлый фон, мягкие бежевые волны, без текста и лиц») и получите уникальное изображение под свой сайт. Обзор сервисов, которые умеют генерировать картинки, есть в подборке про нейросети для работы с изображениями.

Для фона генеративная картинка удобна тем, что вы задаёте нужный цвет и «пустое» место под заголовок. Просите нейросеть делать фон однотонным по краям и без мелких деталей в центре, тогда текст ляжет читаемо.

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

По теме: Как сделать сайт меньше в 2026: вес страницы и скорость загрузки

Как не убить читаемость и скорость

Красивый фон легко превращается в проблему: текст сливается, страница грузится секундами. Три вещи, за которыми следить.

• Контраст. Между текстом и фоном должна быть заметная разница по светлоте. Тёмный текст на светлом фоне (или наоборот) читается всегда; серый по серому, нет. Если фон пёстрый, добавьте полупрозрачную плашку или затемнение под текст.
• Вес картинки. Фото на весь экран не должно весить мегабайты. Перед загрузкой уменьшите размер до нужного (обычно ширины 1600-1920 px хватает) и сожмите в формат WebP или jpg. Тяжёлый фон, главная причина медленной загрузки.
• Мобильные. На телефоне широкая картинка обрезается, и важная часть может уехать за край, а текста на узком экране больше. Проверяйте фон и на компьютере, и на телефоне отдельно.

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

Частые вопросы

Как сделать фон картинкой на весь экран?

В CSS задайте элементу background-image: url('...') вместе с background-size: cover и background-position: center, тогда картинка растянется на весь блок без искажений. В конструкторе выберите блок-обложку и загрузите изображение в его настройках.

Как сделать фон полупрозрачным или затемнить его под текст?

Поверх картинки кладут полупрозрачный слой. В CSS это градиент с прозрачностью (rgba) первым слоем перед url(). В Тильде за это отвечают поля «Цвет фильтра в начале» и «Цвет фильтра в конце» в настройках обложки.

Как сделать градиентный фон без картинки?

Градиент рисуется кодом и ничего не грузит: background-image: linear-gradient(135deg, #цвет1, #цвет2). Задаёте два-три цвета и угол, браузер плавно переливает их. Это самый лёгкий по весу «богатый» фон.

Какой фон лучше для читаемости?

Спокойный и светлый под тёмный текст. Белый, очень светлый серый или бежевый почти никогда не проигрывают. Яркие фото и насыщенные цвета оставляйте для верхнего экрана, где текста мало, а под основной контент берите нейтральный фон.

Можно ли поставить видео на фон?

Да, короткий ролик MP4 или webm ставят фоном первого экрана. Но видео весит больше всего и на слабом интернете тормозит, поэтому делайте его коротким, лёгким и без важного текста прямо в кадре, а сам текст выводите отдельным слоем поверх.