How can I cover properly

element with a backgound image?

Hi
I have a rather complicated background image so it is difficult to align all the elements on the page with the image. While I could get everything aligned properly on most screens, on some screens something gets shifted. As a solution, I thought of splitting the background image into 3 sub-images, each should be placed in a <div> tag. The <div> tags are arranged vertically, one under the other, which is the default arrangement.
The problem is that I can’t get each of the <div> tags covered properly with its background image. Thus, if I use `background-size: contain;` in the css, there are margins on each side of the image, which results in a space between the <div>tags. If I use `background-size: cover;` instead, there are no margins, no empty space, but the background is not scaled with the window. Depending on the screen resolution, it may not fit in even when the browser window is full screen and scroll bars may appear.
Is there a way to cover the browser window with these 3 sub-images such that there is no empty space between them (like when using `background-size: cover;` ) and at the same time everything scales properly with the window (like when using `background-size: contain;` )?

Also in #HTML _↴