Как заставить фоновое изображение подогнать его размер под размер области просмотра в html css, сохраняя при этом полное ⇐ CSS

[Anonymous]

В настоящее время я столкнулся с проблемой размещения фонового изображения, которое могло бы подстраиваться под размер окна (при необходимости увеличивая или уменьшая его), сохраняя при этом свое положение на странице. Над фоновым изображением находится другое изображение — логотип, который в настоящее время работает правильно, поскольку правильно масштабируется и сохраняет свое положение в центре.
Над изображением находится навигация. полосу, поэтому важно, чтобы между изображением и полосой не было зазора. В настоящее время я работаю со следующим кодом:

Код: Выделить всё

.Theme {
display         : flex;
position        : relative;
width           : 100%;
height          : 100vh; /* Full height to ensure it scales properly */
justify-content : center;
align-items     : center;
overflow        : hidden; /* Prevents scrollbars if images overflow */
}
#background-picture {
position        : absolute;
top             : 0;
left            : 0;
width           : 100%;
height          : auto;
min-height      : 100%;
object-fit      : contain; /* Ensures the entire image is always visible */
}
#logo-box{
display         : flex;
justify-content : center;
align-items     : center;
position        : absolute;
top             : 50%;
left            : 50%;
transform       : translate(-50%, -50%); /* Centers the logo box */
}
.main-logo {
width           : 100%;
max-width       : 100%;
object-fit      : cover;
}

Код: Выделить всё

[img]images/Background.png[/img]

[img]images/Logo.png[/img]

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

Подробнее здесь: https://stackoverflow.com/questions/785 ... n-html-css