Как сделать фоновое изображение резиновым?

Question

[keche]

Есть фоновое изображение. Как сделать так, чтобы оно уменьшалось и увеличивалось в зависимости от ширины браузера, разрешения? Вот код codepen.io/Keche/pen/MpWwaN

Answer 1

[Ankhena]

background-size со значениями cover, contain или 100% 100% в зависимости от желаемого поведения.

Comments

[keche]

background-size со значениями cover - работает только для body. Для div не работает.
Что значит - или 100% 100% в зависимости от желаемого поведения?

[Ankhena]

keche: Что? Работает хоть для div, хоть для не-div.

[Ankhena]

keche:

<размер>
Задаёт размер в любых доступных для CSS единицах — пикселях (px), сантиметрах (cm), em и др.
<проценты>
Задаёт размер фоновой картинки в процентах от ширины или высоты элемента.
auto
Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover
Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain
Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.

[Ankhena]

keche: По простому:
cover - займет весь блок, лишнее скроет, не нарушая пропорций
contain - влезет вся картинка, останется пустое место, пропорции не нарушатся
100% 100% - картинка займет все поле, пропорции будут нарушаться

[Ankhena]

keche: Вот вам div и cover https://jsfiddle.net/6h0k5f0z/
уменьшайте/увеличивайте поле и смотрите

Answer 2

[Максим Тимофеев]

Так у Вас так и есть. Только можно background-position: 50% 50%;
Если Вы хотите его вписать полностью, то не cover а contain.

Comments

[keche]

Для contain все равно ширину нужно прописывать. И если сужаешь окно браузера, то изображение копируется и блок не подстраиваться под новое разрешение. Для div height в % почему то не работает. Его нужно заключить в еще один блок?

[Максим Тимофеев]

keche:

Для div height в % почему то не работает.

height в % работает только если явно задан height для родителя.

Для contain все равно ширину нужно прописывать

Зачем?

И если сужаешь окно браузера, то изображение копируется

Что значит копируется? Повторяется, тогда - background-repeat: no-repeat;