Parallax background image fit div - css

Question

I'm trying to create a parallax background as a separator for a site. The background image seems to be only taking up about half of the size it should be with a strange white border all around it. I can't seem to find anything in my code that might be causing this and no matter what I do I either have the border, or scroll bars on the inside div. I just need the background image to fit the space of the div to make a scrolling parallax in that section.
I've tried overflow:hidden playing with various height/width combinations including calc(100vh * 2) to make the image larger. The only thing it seems to do is change the image in the container it appears in (almost like a sub container but there isn't a sub-container on it). I've also played with the transform, transform-origin, perspective, scale, and anything else I could find on google and here.
html, body {
height: 100%!important;
margin: 0px;
padding: 0px;
}
input, select, textarea {
box-shadow: inset 0 2px 4px hsla(0, 0%, 0%, 0.13);
}
.ico {
width: 50px!important;
height: 50px!important;
}
nav {
position: fixed!important;
z-index: 999;
width: 100vw;
}
.content_head {
background-color: aqua;
}
.content_about {
background-color: blueviolet;
}
.content_spacer {
opacity: 0;
height: 50vh;
}
.back_spacer {
opacity: 0;
}
.back1 {
background-image: url("images/IMG_1164.JPG");
background-clip: border-box;
background-size: cover;
height: 100%!important;
width: 100%!important;
min-height: 100%!important;
min-width: 100%!important;
}
.back-group {
max-height: 75vh!important;
}
.container-fluid {
padding: 0!important;
}
/* Parallax Styles Credit to: https://keithclark.co.uk/articles/pure-css-parallax-websites */
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
}
.parallax__layer {
position: absolute;
transform-origin-x: 100%;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.parallax__layer--base {
transform: translateZ(0);
height: 100vh;
}
.parallax__layer--back {
position: absolute;
width: 30%!important;
height: 50vh!important;
top: 0;
right: 0;
bottom: 0;
left: auto;
margin: 0;
transform: translateZ(-1px);
-webkit-transform-origin-y: 100% 100% 0px;
-moz-transform-origin: 100% 100% 0px;
-ms-transform-origin: 100% 100% 0px;
transform-origin: 100% 100% 0px;
}
.parallax__group {
position: relative;
height: 100vh;
transform-style: preserve-3d;
overflow: auto!important;
}
<div class="parallax">
<div class="parallax__group">
<div class="parallax__layer--base content_head">
<h1 class="text-center my-auto">Content base</h1>
</div>
</div>
<div class="parallax__group back-group">
<div class="parallax__layer--back back1"></div>
<div class="parallax__layer--base content_spacer"></div>
</div>
<div class="parallax__group">
<div class="parallax__layer--base content_about">
<h1 class="text-center my-auto">Content base 2</h1>
</div>
</div>
<div class="parallax__group">
<div class="parallax__layer--back back">
<div class="parallax__layer--base content_spacer"></div>
<img src="images/IMG_1170.JPG" height="4096" width="3072" class="img-fluid"/>
</div>
</div>
</div>
Strictly speaking, I suppose it isn't actually a border, but more that the background image is smaller than the DIV element as a whole.

Answer 1

body,
html {
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
overflow-x: hidden;
overflow-y: auto;
perspective: 2px;
}
.section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
/* Display and position the pseudo-element */
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
transform: translateZ(-1px) scale(1.5);
background-size: 100%;
z-index: -1;
}
.static {
background: red;
}
.bg1::after {
background-image: url('https://images.unsplash.com/photo-1567170578400-9d182981f2a1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
}
.bg2::after {
background-image: url('https://images.unsplash.com/photo-1567170566770-eea3bb0b16ed?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80');
}
<main class="wrapper">
<section class="section static">
<h1>Static</h1>
</section>
<section class="section parallax bg1">
<h1>Parallax</h1>
</section>
<section class="section static">
<h1>Static</h1>
</section>
<section class="section parallax bg2">
<h1>Parallax</h1>
</section>
<section class="section static">
<h1>Static</h1>
</section>
</main>