<p>縦チェック</p>
<div class="box bg_check"></div>

<p>斜めチェック</p>
<div class="box bg_skew_check"></div>

<p>半透明チェック</p>
<div class="box bg_check is-transparent"></div>

<p>半透明色変えチェック</p>
<div class="box bg_check is-transparent-mix"></div>

.box{
  width:100%;
  height:200px;
}

/* 縦 */
.bg_check {
	background-color: #fff;
	background-image:
	 linear-gradient(-90deg, #8be4f0 50%, transparent 50%),
    linear-gradient(#8be4f0 50%, transparent 50%);
	background-size: 20px 20px;
}

/* 斜め */
.bg_skew_check{
    background-color: #fff;
    background-image:
	 repeating-linear-gradient(-45deg,
	 #fc693b, #fc693b 10px,
	 transparent 0, transparent 20px),
      repeating-linear-gradient(45deg,
	 #fc693b, #fc693b 10px,
	 transparent 0, transparent 20px);
}

/* 縦半透明 */
.is-transparent{
  background-image:
	 linear-gradient(-90deg, rgba(253, 68, 119, 0.5) 50%, transparent 50%),
    linear-gradient(rgba(253, 68, 119, 0.5) 50%, transparent 50%);
	background-size: 20px 20px;
}

/* 半透明色変えチェック */
.is-transparent-mix{
  background-image:
	 linear-gradient(-90deg, rgba(63, 171, 234, 0.5) 50%, transparent 50%),
    linear-gradient(rgba(253, 68, 119, 0.5) 50%, transparent 50%);
	background-size: 20px 20px;
}