Как растянуть фоновую картинку на весь блок и чтобы она не повторялась?
Поставил картинку фоном блоку через background-image, а она размножилась плиткой и обрезается. Как сделать, чтобы одна картинка красиво заполняла весь блок целиком?
2 ответа
По умолчанию фон повторяется плиткой и не масштабируется — поэтому и плодится. Нужно добавить три свойства:
.hero {
background-image: url("photo.jpg");
background-size: cover; /* растянуть, заполнив весь блок */
background-position: center; /* центрировать картинку */
background-repeat: no-repeat; /* не повторять плиткой */
height: 400px;
}
Ключевое — background-size: cover: картинка масштабируется так, чтобы полностью покрыть блок (края могут немного обрезаться, зато без пустот). no-repeat убирает плитку, center ставит по центру.
И обязательно задай блоку height, иначе ему неоткуда взять высоту и фон не будет виден.
Если нужно, чтобы картинка влезла целиком без обрезки (но могут появиться пустые поля) — используй background-size: contain вместо cover. cover обрезает ради заполнения, contain вмещает целиком. Выбирай по задаче.