Коротко: размер фоновой картинки управляют свойством background-size. Чтобы уменьшить фон, задают contain (вписать целиком) или конкретное значение: проценты, px, rem. Повтор и положение регулируют background-repeat и background-position.
Значения background-size
| Значение | Что делает |
|---|---|
auto |
натуральный размер картинки |
cover |
заполняет блок, обрезая края |
contain |
вписывает целиком, могут появиться поля |
50% |
половина ширины блока |
300px |
точная ширина в пикселях |
Вкладки: как уменьшить фон
.hero {
background-image: url("img.jpg");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}contain уменьшает картинку так, чтобы она влезла в блок целиком. Свободные места закрашиваются фоном-цветом.
.section {
background-size: 50% auto;
}Первое значение — ширина, второе — высота. auto сохраняет пропорции. Так картинку легко уменьшить ровно вдвое по ширине.
.icon {
background-size: 24px 24px;
}Фиксированный размер в пикселях удобен для иконок и повторяющегося узора — картинка не зависит от размера блока.
.bg {
background-image: url("dot.png");
background-size: 20px 20px;
background-repeat: repeat;
}Мелкий узор: уменьшаем картинку и включаем повтор. Так получается аккуратный паттерн вместо одной крупной картинки.
background-size не меняет сам файл — он остаётся прежнего размера. Если картинка тяжёлая, её всё равно нужно сжать в редакторе, иначе скорость сайта не вырастет.Практика: уменьшить фон
- Определите, фон должен заполнять блок или вписываться целиком.
- Для «влезть целиком» —
background-size: contain. - Для точного размера — проценты или пиксели.
- Отключите повтор:
background-repeat: no-repeat. - Выровняйте картинку:
background-position: center. - Проверьте, что текст читается на фоне.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Картинка повторяется | нет no-repeat |
добавить свойство |
| Картинка обрезана | стоит cover |
заменить на contain |
| Картинка растянута | задана только ширина и высота | использовать auto |
| Фон мелкий, но сайт грузится долго | тяжёлый файл | сжать изображение |
| Картинка смещена в угол | нет background-position |
center |
Проверьте себя
background-size: 50% auto?
Вопросы и ответы
cover увеличивает картинку до заполнения блока, обрезая лишнее. contain уменьшает её до полного вписывания, оставляя поля. Для «уменьшить» нужен второй.
Нет. Файл скачивается в исходном размере, просто отображается меньше. Чтобы уменьшить вес, сжимайте само изображение или используйте современные форматы.
Задайте небольшой размер, например 20px 20px, и включите repeat. Тогда картинка многократно повторится по всему блоку.
Проверьте путь к файлу url() и то, что свойство не перебито шорткатом background. Простое background: #fff обнуляет картинку.
Итоги
- Размер фона задаёт
background-size. contain— вписать целиком,cover— заполнить с обрезкой.- Проценты и пиксели дают точный размер.
- Размер на экране не меняет вес файла — сжимайте картинку.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.