CSS transform skewY как сделать что бы фоновая картинка не переворачивалась?

Question

[Виорел]

Привет всем, верстаю макет из photoshop


как видно по макету фононовая картинка стоит по горизонтали

решил использовать transform skewY
как сделать что бы фоновая картинка не переворачивалась

вот мой код

<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

[Ivan Bogatov]

Задать фон wrapper, а переворачивать container?