Изображение внутри CSS параллелограмма

Question

Я создаю Slick Carousel Slider с параллелограммом div и изображением для каждого слайда. Я могу создать div параллелограмма, однако изображение внутри div параллелограмма также искажается, даже когда я применяю к нему отрицательную степень. Вот мой код:

html:

    <!-- Home Main Slider -->
    <div class="home-main-slider-container">
      <?php if(have_rows('home')): ?>
        <?php while(have_rows('home')): the_row(); ?>
        <div class="main-slider">
            <?php if(have_rows('main_slider')): ?>
              <?php while(have_rows('main_slider')): the_row(); ?>
                <?php 
                  $bg = get_sub_field('image');
                 ?>
                <div class="main-slide">
                 <div class="service-parallelogram">
                   <div class="service-img" style="background:url(<?php echo $bg['url']; ?>);"></div>
                 </div>
                </div>
              <?php endwhile; ?>
            <?php endif; ?>
          </div>
        <?php endwhile; ?>
      <?php endif; ?>
    </div>
    <!-- /Home Main Slider -->

css:

.home-main-slider-container {
  .main-slider {
    .main-slide {
      .service-parallelogram {
        width: 600px;
        height: 750px;
        -webkit-transform: skewX(20deg);
        -ms-transform: skewX(20deg);
        transform: skewX(20deg);
        .service-img {
          -webkit-transform: skewX(-20deg);
          -ms-transform: skewX(-20deg);
          transform: skewX(-20deg);
          background-size: cover !important;
          background-position: center !important;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}