My website consists of four main sections, each with a background image of the same size. These images contain important elements that I always want to be visible. Initially, the images would resize based on the browser window size, but a recent CSS cleanup project changed that so they always display at 100% height. This adjustment worked perfectly, until I realized that changing the browser window height caused the elements to spill out of the four main sections. This issue arose because the document only specified the height at 100vh, with no width specified for any section.
Is there a simple solution to this dilemma? I need to set boundaries for the inner divs and buttons by defining a right and left border for the page, while still maintaining the 100% vertical height of the four main sections. The current CSS properties being used for the divs are:
background-attachment: fixed;
background-size: cover;
background-repeat: no-repeat;
min-height: 100vh;
Essentially, I require a container that surrounds the four main sections, expanding to the width of the images while allowing them to resize with the window. This container should also keep all buttons and divs contained within it.
You can view the page here: view-source: The current setup works well, but the buttons overflow the sides if the browser window height is too short.