How can I cover properly <div> 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; )?
By the way, I tried to remove that empty space by introducing a negative margin-top or by specifying position: relative and then a negative top value. Either way it works but only for a specific window size. When resizing the window (or trying on a screen with a different resolution) everything gets broken.