Как сделать фон в HTML: полное руководство с примерами
- Зачем задавать фон на сайте и где он используется
- Как сделать фон в HTML и CSS: основные способы
- Как задать фон с помощью HTML
- Почему лучше использовать CSS для фона
- 1. В CSS больше возможностей
- 2. Разделение структуры и оформления
- 3. Адаптивность и кроссбраузерность
- 4. Современное использование
- Использование свойства background-color
- Установка цвета для всего сайта или отдельного блока
- Как правильно настроить изображение на фоне
- Размер фонового изображения (background-size)
- Позиция изображения (background-position)
- Повторение картинки (background-repeat)
- Закрепление фона при прокрутке (background-attachment)
- background-size: cover; и contain
- Медиа-запросы для мобильных устройств
- Ошибки при установке фона в HTML и CSS
- Готовый код HTML + CSS для установки фона
Когда начинающий веб-разработчик создаёт свой первый сайт, он сразу сталкивается с вопросом оформления страницы. Цвет, изображение или даже градиент помогают задать настроение сайту, подчеркнуть контент и сделать его удобнее для восприятия пользователей.
В этом руководстве мы подробно разберём, как сделать задний фон для веб-страницы и покажем, как сделать бэкграунд в html различными способами — от простых цветов до сложных градиентов. Материал подойдёт как начинающим разработчикам, так и тем, кто хочет освежить знания.
Зачем задавать фон на сайте и где он используется
У фона есть три ключевые задачи:
- Визуальная привлекательность. Фон формирует первое впечатление о странице. Белый цвет подходит для документов, но сайт с таким оформлением выглядит пусто и скучно.
- Удобство чтения. Важно, чтобы фон и текст гармонировали друг с другом. Пользователям проще воспринимать тёмный текст на светлом фоне и наоборот.
- Фирменный стиль. Фон помогает передать айдентику бренда. Это один из инструментов узнаваемости.
Фон нужен не только в body, но и в отдельных секциях: блоки с отзывами, карточки товаров, баннеры, всплывающие окна. Для них часто встаёт вопрос, как сделать фоном картинку в html, — и именно это мы тоже рассмотрим ниже.
Если вы не уверены, какой вариант подойдёт, можно спросить у нейросети — например, GigaChat. Искусственный интеллект предложит варианты дизайна и даже поможет с примером кода.
Как сделать фон в HTML и CSS: основные способы
Вот, каким может быть фон для сайта html:
- Цвет. Самый простой способ его задать — через свойство
background-color. - Картинка. Для этого используем атрибут
background-image, который позволяет указать путь к файлу. - Градиент. Можно использовать
linear-gradientилиradial-gradient.
Выбор фона зависит от задачи. Если нужно быстро оживить простую страничку html, подойдёт цвет; для ярких лендингов и блогов — изображение; а для современных сайтов часто используют градиенты.
Как задать фон с помощью HTML
Чтобы задать фон в HTML с помощью самого языка без использования CSS, используют тег <body> и его атрибуты. Такой способ считается устаревшим, поскольку выбор фона ограничивается двумя вариантами — цветом и картинкой.
Для начинающих: HTML (HyperText Markup Language) — это язык разметки, с помощью которого задаётся структура страницы. CSS (Cascading Style Sheets) — язык стилей, который отвечает за внешний вид элементов: цвета, фон, отступы, шрифты и т.д.
Атрибут bgcolor отвечает за цвет подложки страницы. С его помощью можно сделать фон белым, чёрным или любым другим, используя название цвета или его код.
Атрибут background позволяет указать путь к картинке, которая будет использоваться как фон документа. Изображение автоматически «растягивается» на всю область и повторяется по горизонтали и вертикали, если оно меньше размера окна.
Почему лучше использовать CSS для фона
HTML-атрибуты (bgcolor, background) в своё время были актуальным способом сделать фон на странице. Несмотря на свою простоту, сейчас ими пользуются всё реже из-за ряда ограничений. CSS даёт веб-дизайнерам больше возможностей для оформления сайта.
1. В CSS больше возможностей
В чистом HTML можно задать только цвет или картинку. В CSS доступны градиенты, полупрозрачность, комбинации нескольких изображений, анимации фона.
2. Разделение структуры и оформления
HTML отвечает за содержание страницы, а CSS — за её внешний вид. Если фон прописывать прямо в <body>, код становится «грязным» и неудобным для поддержки. При использовании CSS всё оформление хранится в стилях: это упрощает командную работу.
3. Адаптивность и кроссбраузерность
CSS позволяет подстраивать фон под разные устройства и размеры экранов. Можно использовать background-size: cover, задавать разные фоны для мобильных и десктопов через media queries. В HTML таких возможностей нет.
4. Современное использование
Атрибуты bgcolor и background уже сейчас считаются устаревшими, а в будущем могут и вовсе исчезнуть. CSS — это современный стандарт, который поддерживается всеми браузерами и платформами.
Подсказка: если нужно быстро протестировать разные фоны, можно сэкономить время с GigaChat. Достаточно написать «сделай бэкграунд в html с градиентом», и сервис выдаст готовый сниппет кода.
Использование свойства background-color
Проще всего задать однотонный фон для страницы или отдельного элемента через свойство background-color. Оно принимает названия цветов (например, red, blue, green), шестнадцатеричные коды (#ff0000), или значения в форматах RGB и HSL. Таким образом можно быстро поменять цвет подложки и сразу увидеть результат.
<!DOCTYPE html>
<html>
<head>
<title>Пример фон html страницы</title>
</head>
<body bgcolor="lightblue">
<h1>Фон html страницы</h1>
<p>Здесь цвет задаётся с помощью атрибута bgcolor без CSS.</p>
</body>
</html>
Установка цвета для всего сайта или отдельного блока
Цвет можно задать как для всей страницы (обычно это делается через тег body), так и для конкретного блока — заголовка, подвала, секции или карточки. Это удобно, когда нужно визуально разделить разные части сайта или выделить отдельный элемент интерфейса. Например, один фон используют для основного контента, а другой — для блока с контактами или отзывами.
Для всей страницы цвет обычно задают через тег body:
<body style="background-color: lightblue;">
<h1>Фон html страницы</h1>
<p>Весь сайт будет с голубым фоном.</p>
</body>
А вот так можно изменить фон отдельного элемента — например, раздела или карточки.
<div style="background-color: #f0f0f0">
<h2>Отзывы клиентов</h2>
<p>Здесь можно выделить блок отдельным фоном.</p>
</div>
Как правильно настроить изображение на фоне
Картинка на заднем плане может выглядеть красиво, а может раздражать пользователя. Всё зависит от правильной настройки. В HTML и CSS есть несколько свойств, которые помогают управлять фоновым изображением: его размером, положением, повторением и поведением при прокрутке страницы. Если их умело комбинировать, фон будет выглядеть органично.
Подсказка: через GigaChat можно не только написать код, но и сгенерировать картинку для фона — например, абстрактный паттерн или фото-текстуру. Это удобно, когда нет готового изображения.
Размер фонового изображения (background-size)
Это свойство определяет, как именно картинка растягивается или сжимается под размер окна. Можно указать точные пиксели, проценты или использовать значения cover (растянуть на всю страницу) и contain (вписать без обрезки).
Пример:
<body style="background-image: url('background.jpg'); background-size: cover;">
<h1>Фон на всю страницу</h1>
</body>
Позиция изображения (background-position)
Отвечает за то, где именно разместить рисунок: сверху, снизу, по центру или в углу. Например, значение center center помещает изображение строго по центру страницы.Пример:
<body style="background-image: url('background.jpg'); background-repeat: no-repeat; background-position: center center;">
<h1>Фон по центру</h1>
</body>
Повторение картинки (background-repeat)
Фоновое изображение повторяется по горизонтали и вертикали, если не прописано иное. Свойство background-repeat задаёт поведение: repeat-x (по горизонтали), repeat-y (по вертикали) или no-repeat (без повторений).
Пример:
<body style="background-image: url('pattern.png'); background-repeat: repeat-x;">
<h1>Фон повторяется только по горизонтали</h1>
</body>
Закрепление фона при прокрутке (background-attachment)
Если задать background-attachment: fixed, изображение будет оставаться неподвижным при прокрутке страницы. Это называется эффектом параллакса. Вариант scroll закрепляет фон вместе с содержимым.
Пример:
<body style="background-image: url('background.jpg'); background-attachment: fixed; background-size: cover;">
<h1>Фон закреплён при прокрутке</h1>
</body>
background-size: cover; и contain
cover — заставляет картинку «накрывать» всю страницу или блок. Изображение может обрезаться, но пустых полей не останется. Это оптимальный вариант для полноэкранного фона.
contain — вписывает картинку целиком, не обрезая её. При этом по краям могут появиться полосы, если пропорции картинки не совпадают с размером окна.
Пример:
<body style="background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat;">
<h1>Адаптивный фон</h1>
</body>
Медиа-запросы для мобильных устройств
Для корректного отображения на разных устройствах используются медиа-запросы. С их помощью можно менять изображение или настройки для экранов определённой ширины.
Пример:
<style>
body {
background-image: url('background-large.jpg');
background-size: cover;
}
@media (max-width: 768px) {
body {
background-image: url('background-mobile.jpg');
background-size: contain;
}
}
</style>
В этом примере на компьютере загружается большое изображение, а на телефоне — облегчённая версия для маленького экрана.
Ошибки при установке фона в HTML и CSS
Неподходящий размер картинки. Огромные изображения «весят» много, страница тормозит. Делайте несколько версий (desktop/mobile) и подключайте их через media или @media.
Фон «прыгает» при прокрутке. Вероятно, вы забыли background-repeat: no-repeat; и background-position: center; — поэтому фон тайлится (одна картинка размножается на несколько копий и заполняет всю страницу, как обои с повторяющимся узором) и смещается.
Картинка обрезается не там. Для полноэкранного фона используйте background-size: cover; и выравнивание по центру. Если важно сохранить весь рисунок — contain.
Текст теряется на фоне html страницы, не хватает контраста. Добавьте подложку: полупрозрачный слой поверх фона (rgba(...)) или градиент.
Стягивание на мобильных, нет адаптивных правил. Меняйте фон или его свойства в медиа-запросах.
Готовый код HTML + CSS для установки фона
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Фон в HTML</title>
<style>
body {
margin: 0;
height: 100vh;
background: url('bg.jpg') center/cover no-repeat fixed;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
text-align: center;Фон на сайте — это не просто украшение или «картинка ради картинки». Он помогает выделить текст, создать настроение и поддержать единый стиль. Используйте CSS-свойства вместо устаревших атрибутов, следите за адаптивностью и весом картинок. А быстро подобрать идею, написать рабочий код или протестировать разные концепции поможет GigaChat.