I am currently facing an issue with placing a background image, which would adjust to the window size (scaling up or down when needed) while maintaining its position on the page. Above the background image, there is a different image, a logo, which is currently working properly as it scales correctly and maintains its position in the center.
Above the image, there is a navigation bar, so it is important that there is no gap between the image and the bar. Currently I am working with the following code:
.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; }<div class="Theme"><img id="background-picture" src="images/Background.png" alt="Background"><div id="logo-box"><img class="main-logo" src="images/Logo.png" alt="Logo"></div></div>I have tried making it a background image and used a bunch of different properties, as well, as making it a separate image in a different container and trying to scale that.
None of the above worked, as I either get a loss in the content of the background image (the side elements are cut off), or bars of the body background color appear on the sides, top or bottom.