Not entirely sure, based on your question, exactly what you need, but I think I know how to get you in the right direction and you can make tweaks from there as you see fit. In order for your header and footer to always be visible regardless of screen size, you need to give the first div in .container
style=”position:fixed; width: 100%; top: 0;”
That will lock your header into place. You will need to do the same with your footers.
on .footer-kaart2 give it
style=”position: fixed; width: 100%; bottom: 37px; z-index:100;”
and on .bar give it
style=”position:fixed; width: 100%; bottom: 0px; z-index: 101; background-color: white;”
for the body and background image, on the div .background, add
style=”position:fixed; width: 100%; top: 100px;”
That should get you on the right track and pretty close to what you’re looking for. At that point, you will just need to add the scalability for the dots and the text in the body. Anyway, hope that helps — and hopefully I understood what you were looking for. Let me know if you have any additional questions!