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

Question

[ravlex]

Есть вот такой хедер с адаптивным фоном:

header {
    background: url('../img/bg.jpg');
    background-size: cover;
    background-position: 100% 100%;
    background-color: #464646;
    padding-top: 30px;
    min-width: 100%;
}

Но при уменьшении разрешения нужно чтобы картинка была во всю ширину и высоту. То есть не часть её, а полностью. Как это сделать? Если что, верстаю по сетке бутстрапа.

Answer 1

[Алексей]

Можно background-size: 100% 100%;
Только тогда ее будет растягивать по какой либо стороне, если пропорции блока не подходят под пропорции картинки.
Ну это по логике по любому будет, при такой постановке вопроса.

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

Answer 2

[Ankhena]

background-size: cover; этого достаточно.

Дальше вопрос, готова ли сама картинка к такому применению? У нее могут изменится пропорции, если блок в который он вписывается тоже будет менять пропорции.

Либо background-size: contain; - описано в посте выше. Могут быть проблемы в заполнении всего блока. Пока не понятно, как там у Вас все организовано.

Либо покажите реальный пример.

p.s. Если у Вас фон адаптивный и на всю площадь блока, то зачем Вы еще пишете position и цвет?

Comments

[Алексей]

Ну цвет думаю надо прописывать в любом случае, мало ли у кого-то картинка не отобразиться. Особенно если текст или другие блоки на этом фоне имеют отличные цвета от стандартных темных оттенков.
Мысли вслух.

[Ankhena]

Алексей: ладно, с цветом я погорячилась :)