画面から背景がはみ出ても左右にスクロールしないようにしたいです

Question

CSSで下記写真のように背景を斜めにしたいと考えています。

該当のソースコード

現在コードはhtmlとcssそれぞれ下記のように記載しています。
【html】

<div class="bg"> <span style="top: 110px;"></span> <span style="top: 2626px;"></span> </div>

【CSS】
.bg{
overflow: hidden;
background: #fff;
}
.bg span{
width:100%;
height: 4600px;
display: block;
position: absolute;
top:0;
left: 50%;
margin-left: -700px;
-webkit-transform: skewX(-47deg);
transform: skewX(-47deg);
background: #2f2f2f;
z-index: -3;
}
.bg span:nth-child(even){
margin-left: -270px;
-webkit-transform: skewX(47deg);
transform: skewX(47deg);
}

問題点

背景自体は作れたのですが、
現在のコードのままだと画面からはみ出している部分まで
横にスクロールできるようになっており
スクロールしないようにしたいです。

ここに問題に対して試したことを記載してください。
下記のようにbgクラスにposition;relativeを記載したら
今まで表示されてた斜めの背景が表示されなくなりました。
.bg{
overflow: hidden;
background: #fff;
position:relative
}

斜めの背景を作り、画面からはみ出ている部分へスクロールしないようにするには
どの部分を改善すればいいのかわからないため教えていただきだいです。
よろしくお願いいたします。

Answer 1

bodyにoverflowを指定すれば良いのでは?

body{
  overflow-x:hidden;
}