Search code examples
cssbootstrap-4parallax

Parallax background image fit div

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>

enter image description here

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.

Solution 

  • 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>