Задать вопрос
@ravlex
html

Как сделать адаптивный фон чтобы при меньших разрешениях был на всю ширину?

Есть вот такой хедер с адаптивным фоном:
header {
    background: url('../img/bg.jpg');
    background-size: cover;
    background-position: 100% 100%;
    background-color: #464646;
    padding-top: 30px;
    min-width: 100%;
}

Но при уменьшении разрешения нужно чтобы картинка была во всю ширину и высоту. То есть не часть её, а полностью. Как это сделать? Если что, верстаю по сетке бутстрапа.
  • Вопрос задан
  • 579 просмотров
Комментировать
Подписаться 1 Оценить Комментировать
Ответ пользователя Алексей К ответам на вопрос (2)
lunpully
@lunpully
Можно background-size: 100% 100%;
Только тогда ее будет растягивать по какой либо стороне, если пропорции блока не подходят под пропорции картинки.
Ну это по логике по любому будет, при такой постановке вопроса.

Либо использовать background-size: contain;
Тогда картинка будет вписана внутрь блока. Но будет сохранять пропорции. И не будет закрывать некоторую часть этого блока.
Ответ написан
Комментировать
Комментировать