Справочник · CSS

background-size: как вписать фоновую картинку

cover закрывает весь блок и может обрезать края. contain показывает файл целиком и может оставить поля.

Как это работает

Размер фона не зависит от размера файла напрямую. cover удобен для декоративной шапки. contain — когда в фоне схема или логотип, который нельзя резать. Значение 100% 100% растягивает картинку и портит пропорции. Вместе с background-repeat: no-repeat и background-position фон ведёт себя предсказуемо. Текст поверх картинки нужен только если контраст это позволяет.

.hero {
  background-image: url("/images/cover.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Когда использовать

Декоративная шапка и мелкий узор. Информативный рисунок лучше вставить тегом img с alt.

Частые ошибки

• Картинка растянута и лица стали широкими.
• Повтор фона дал плитку там, где ждали одно изображение.
• Текст на пёстром cover не читается.