CSS transform skewY how to make the background image not flip?

Question

css

Hello everyone, I'm making up a layout from photoshop,

as you can see from the layout, the background image is horizontal,
I decided to use transform skewY,
how to make the background image not flip
here is my code

<section class="popular-position" style="background-image: url(img/bg_populars.jpg);">
  <div class="grid-container">
    <div class="section_title">
      <h2><span>Популярные  </span> позиции </h2>
    </div>
    <div class="grid-x grid-padding-x grid-margin-y">

    </div>
  </div>
</section>

.popular-position {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top center;
    transform: skewY(9deg);
    min-height: 600px;
    z-index: -1;
}

.popular-position > * {

Answer 1

Set wrapper background and flip container?