Keeping image size the same relative to each other

Question

So this site I'm making has a hero with a full sized image, a full width image banner beneath it, and then the rest of the page. The hero and banner images have the same background, and the background of the rest of the page is a repeated tile of said background, if that makes sense.

Hero:

Bottom of hero, banner (aircraft with smoke trail), and then the rest of the body below:

As you can see here, the sizes of the background images are fairly consistent, so the grain is a similar size and there's no seam between parts of the page.

However, this is what happens when I resize the page:

There's a horrific seam between each image due to the differing sizes. Any idea how to combat this?

<div class="hero"><!-- contents --></div>
<div class="divider"></div>

.hero {
    background-image: url("../images/hero.jpg");
    background-size: cover;
    background-position: bottom;
    height: 100vh;
}

.divider {
    background-image: url(../images/divider.jpg);
    width: 100%;
    height: 230px;
    background-size: cover;
    background-position: center;
}

body {
    background-image: url(../images/tile.jpg);
}