I recently encountered an issue with my website where the header and footer needed to remain fixed at the top and bottom of the screen while the content scrolls. I found some guidance on achieving this effect in a question on Stack Overflow, which somewhat worked for me. However, as I scrolled down the page, I noticed that the background-image for the content was getting chopped off. This puzzled me as I had set the background image to repeat vertically. Additionally, I observed that the footer seemed to be obstructing part of the content.
In order to create the desired scroll effect for the content, I added position: fixed; to the header and footer elements. The main content area was left with position: absolute; to ensure the footer stayed fixed at the bottom of the screen.
For reference, you can view the website in question by following this link: Link to website