<div class="background">
  <div class="item1">ベタ塗り背景</div>
  <div class="item2">2色背景</div>
  <div class="item3">縦縞背景</div>
  <div class="item4">横縞背景</div>
  <div class="item5">ストライプ背景</div>
  <div class="item6">3色ストライプ背景</div>
  <div class="item7">なまこ壁風背景</div>
  <div class="item8">その他背景</div>
</div>
.background div{
  margin:30px 0;
  width:100%;
  height:100px;
  line-height:100px;
  text-align:center;
  font-weight:bold;
}
/*各背景*/
.item1{
  background:#70b5ff;
}
.item2{
  background:linear-gradient(#fc0 50%, #ff9 0%);
}
.item3{
  background-size: auto auto;
  background-color: rgba(255, 217, 232, 1);
  background-image: repeating-linear-gradient(90deg, transparent, transparent 10px, rgba(255, 182, 182, 1) 10px, rgba(255, 182, 182, 1) 20px );
}
.item4{
  background-size: auto auto;
  background-color: rgba(245, 217, 255, 1);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(255, 183, 183, 1) 10px, rgba(255, 183, 183, 1) 20px );
}
.item5{
  background-size: auto auto;
  background-color: rgba(217, 221, 255, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 10px, rgba(183, 206, 255, 1) 10px, rgba(183, 206, 255, 1) 20px );
}
.item6{
  background-size: auto auto;
  background-color: rgba(0, 173, 73, 1);
  background-image: repeating-linear-gradient(0deg, transparent, transparent 5px, rgba(86, 228, 0, 1) 5px, rgba(86, 228, 0, 1) 10px ),repeating-linear-gradient(0deg, transparent, transparent 10px, rgba(215, 255, 81, 1) 10px, rgba(215, 255, 81, 1) 20px );
}
.item7{
  background-size: auto auto;
  background-color: rgba(190, 190, 190, 1);
  background-image: repeating-linear-gradient(135deg, transparent, transparent 55px, rgba(255, 255, 255, 1) 55px, rgba(255, 255, 255, 1) 70px ),repeating-linear-gradient(45deg, transparent, transparent 55px, rgba(255, 255, 255, 1) 55px, rgba(255, 255, 255, 1) 70px );
}
.item8{
  background-size: auto auto;
  background-color: rgba(123, 165, 255, 1);
  background-image: repeating-linear-gradient(27deg, transparent, transparent 10px, rgba(255, 255, 255, 1) 10px, rgba(255, 255, 255, 1) 13px ),repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(255, 255, 255, 1) 10px, rgba(255, 255, 255, 1) 13px );
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.