Как сделать фон гибкого контейнера: верхняя половина для изображения и нижняя половина для фона?

Question

У меня есть гибкий контейнер, и я хочу, чтобы этот контейнер имел в качестве фонового изображения / цвета значение 50% / 50% (сверху / снизу).Это шаблон для этого Я заранее не знаю высоту контейнера и хочу, чтобы контейнер обернул элементы внутри него независимо от их высоты.

Answer 1

Используйте несколько фонов, как это:

body {
 margin:0;
 background:
   url(https://picsum.photos/1000/800?image=1069) top/100% 50% no-repeat,
   linear-gradient(red,red) bottom/100% 50% no-repeat;
 height:100vh;
}

или просто так:

body {
 margin:0;
 background:
   url(https://picsum.photos/1000/800?image=1069) top/100% 50% no-repeat,
   red;
 height:100vh;
}

Также как это:

body {
 margin:0;
 background:
   linear-gradient(red,red) bottom/100% 50% no-repeat,
   url(https://picsum.photos/1000/800?image=1069) center/cover no-repeat;
 height:100vh;
}