Slanted divs with background image

[aaron4osu]

I’m trying to create some sections with a background image and slanted edges… What I have is working except that the top slanted section is getting it’s own background image. I’m not sure why the background is not filling the entire area.

note I have two versions… one where they point to the right (slanted-top slanted-bottom) and one where they point to the left (slanted-top-r slanted-bottom-r)

here is a code pen https://codepen.io/aaron4osu/pen/gOXBKdw

here is the html

<section class="bg-theme-dark slanted-top slanted-bottom">
  <div class="container  ">

    <div class="row ">
      <div class="col-md-8 offset-md-2 my-auto py-5" >
        <h2 class="white">Lorem ipsum dolor sit amet</h2>
        <p class="white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div><!-- close row -->
  </div><!-- close container -->
</section> 

<h2 class="spacer">blank space</h2>

<section class="bg-theme-dark slanted-top-r slanted-bottom-r">
  <div class="container  ">

    <div class="row ">
      <div class="col-md-8 offset-md-2 my-auto py-5" >
        <h2 class="white">Lorem ipsum dolor sit amet</h2>
        <p class="white">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>

    </div><!-- close row -->
  </div><!-- close container -->
</section> 

css

/* ==========================================  */
/* =====        Slanted Divs          ========  */
/* ==========================================  */

.slanted-bottom, .slanted-bottom-r{
  position: relative;
  padding: 0px 0;
  overflow: visible;
  z-index: 1;
}

.slanted-bottom:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  bottom: 0;
  transform-origin: left bottom;
  transform: skewY(3deg);
}


.slanted-bottom-r:after {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  bottom: 0;
  transform-origin: right bottom;
  transform: skewY(-3deg);
}


.slanted-top, .slanted-top-r {
  position: relative;
  padding: 0px 0;
  overflow: visible;
  z-index: 1;
}


.slanted-top:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  transform-origin: left top;
  transform: skewY(-3deg);
}
.slanted-top-r:before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  background: inherit;
  z-index: -1;
  top: 0;
  transform-origin: right top;
  transform: skewY(3deg);
}

.bg-theme-dark{
  margin:200px 0;
  padding:100px 0px;
	background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.6) 86%, rgba(0,0,0,.6) 100%), url('assets/img/home-hero.jpg'); 
    background-size: cover; 
    background-position: center center;
    background-repeat:no-repeat;
}

[PaulOB]

@aaron4osu

’m not sure why the background is not filling the entire area.

You have 3 separate elements all with the same background image applied to each. They will never match up. Usually when you use skewed elements for slants you would give them a white background (to match the background behind the image) and to rub out part of the image as you can never have an image in the skewed section match up to the main horizontal image. The logic is badly flawed

These days however you can just use clip path and do away with all that extra code and work .