Атрибут background тега <body>
Описание
Атрибут background позволял задавать фоновое изображение для всей страницы в HTML4. Это устаревший атрибут, который не рекомендуется к использованию в современных стандартах HTML5.
Устарело: В HTML5 этот атрибут удален из спецификации. Используйте CSS-свойство
background-image вместо него.
Пример устаревшего синтаксиса:
<body background="images/bg-pattern.jpg">
<!-- Содержимое страницы -->
</body>
Современная CSS-альтернатива:
body {
background-image: url('images/bg-pattern.jpg');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
Проблемы устаревшего подхода:
| Проблема | Решение в CSS |
|---|---|
| Нет контроля повторения изображения | background-repeat |
| Нет управления позицией | background-position |
| Нет адаптивности | background-size |
| Смешивание структуры и стилей | Разделение HTML и CSS |
Современные возможности фона:
/* Градиентный фон */
body {
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
/* Несколько фоновых изображений */
body {
background:
url('texture.png'),
url('pattern.png'),
linear-gradient(#eee, #fff);
}
/* Оптимизированный фоновый режим */
body {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
background-blend-mode: overlay;
}
Рекомендации по фоновым изображениям:
- Используйте современные форматы (WebP, AVIF)
- Оптимизируйте размер файла
- Для текста поверх изображения добавьте затемнение
- Учитывайте контрастность для доступности
- Тестируйте на разных размерах экрана
Полный пример современного подхода:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
min-height: 100vh;
background:
linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
url('background.jpg') center/cover fixed no-repeat;
font-family: sans-serif;
color: white;
}
</style>
</head>
<body>
<!-- Контент страницы -->
</body>
</html>
Почему CSS лучше:
- Поддержка сложных фоновых эффектов
- Возможность медиа-запросов для адаптивности
- Лучшая производительность
- Разделение структуры и представления
- Доступ к современным функциям (blend modes, filters)
Примечание: Хотя браузеры могут поддерживать атрибут background для обратной совместимости, профессиональная разработка требует использования CSS для всех аспектов визуального оформления, включая фоновые изображения.