CSS make background images misaligned - css

Question

I've got two divs .navigation & .entry-image
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: #008dd0;
background-blend-mode: multiply;
z-index: 100;
color: #fff;
background-size: cover;
background-position: top;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
}
The background aligns well on widescreen however set as size:cover, they do not stay aligned as they respond obviously.
I've experimented with background-size:100% - this does not work on 100vh as it repeats.
Any suggestion on how I can keep the backgrounds aligning while still maintaining 100vh on the parent container. This is all due to the .navigation having a multiply blend mode applied which is only required behind the .navigation div
codepen: https://codepen.io/lisa-jaffe/pen/jOErBBX

Answer 1

I hope I understood your question correctly. If so:
If what you're trying to achieve is to have a sort of overlay on top of the image then instead of trying to align 2 images, which is rather difficult, you can use a proper "overlay", which is far simpler.
What I did was remove the navigation image and instead use a background color with transparency. You get the same result as your code but without the alignment issues.
.navigation {
position: absolute;
top: 0;
width: 100%;
left: 0;
right: 0;
background-color: rgba(6, 84, 121, 0.7);
z-index: 100;
color: #fff;
height:300px;
}
.entry-image {
height: 100vh;
background-size: cover;
text-align: center;
position: relative;
background-position: top;
background-image:url(https://loremflickr.com/1680/1050);
}
<div class="navigation"></div>
<div class="entry-image"></div>
Here's a codesandbox if you need that instead