How to layout and what principles should be used to layout a landing page with a full height background?

Question

css

Let's say we have a background that is a solid image, say 4000px high. Interested in the layout of such a landing, with a technically correct approach. Interested in how the elements are positioned relative to the background-image (absolute or the background is cut and somehow spread over the containers)

Answer 1

background-image if you want a simple background.
background-size: cover;
background-position: center;
If you need to fix it with the background, add some more parallax to the picture, then it's best to create a section and put 2 blocks there - the first is relative with z-index: 1, the second is fixed with z-index: -1, on fixed we throw background- image with the above properties and height:100vh or 100%. If you need parallax, then increase the width and height - 100% + the planned parallax offset.