<div class="CSSbackgroundStripes">
  <div class="horizontal"><h1>Horizontal Stripes</h1></div>
  <div class="diagonal"><h1>Diagonal Stripes</h1></div>
  <div class="vertical"><h1>Vertical Stripes</h1></div>
  <div class="radial"><h1>Radial Stripes</h1></div>
  <div class="colourful"><h1>Colourful Stripes</h1></div>
</div>

.CSSbackgroundStripes {
  position: relative;
  margin:30px;
}

h1 {
  color: black;
  padding:35px;
  text-align: center;
}

.horizontal {
  width:100%;
  height:100px;
  background: repeating-linear-gradient(#0081a7, #0081a7 10px,
  #00afb9 10px, #00afb9 20px);
}

.diagonal {
  width: 100%;
  height:100px;
  background: repeating-linear-gradient(-45deg, #f07167, #f07167 20px, #fed9b7 20px, #fed9b7 40px);
}

.vertical {
  width:100%;
  height:100px;
  background: repeating-linear-gradient(to right,#fdfcdc,
  #fdfcdc 10px, #00afb9 10px, #00afb9 20px);
}

.radial {
  width:100%;
  height:100px;
  background: repeating-radial-gradient(circle,#bee3db,
  #bee3db 5px, #669bbc 5px, #669bbc 10px);
}


.colourful {
  width:100%;
  height: 100px;
  background: linear-gradient(90deg, rgba(69,252,92,1) 10%, rgba(253,29,29,1) 10%, rgba(212,58,70,1) 21%, rgba(29,190,253,1) 21%, rgba(29,190,253,1) 31%, rgba(42,29,253,1) 31%, rgba(38,29,253,1) 41%, rgba(253,29,231,1) 41%, rgba(253,29,231,1) 51%, rgba(29,253,226,1) 51%, rgba(29,253,226,1) 61%, rgba(253,173,29,1) 61%, rgba(253,173,29,1) 71%, rgba(253,249,29,1) 71%, rgba(248,237,41,1) 81%, rgba(162,29,253,1) 81%, rgba(162,29,253,1) 91%, rgba(253,29,242,1) 91%);
}