<!-- Note: Patterns appearance from one browser to the next can vary -->

<div class="wrapper">
  
  <div class="triangles"></div>
  
  <div class="diagonal_stripes_even"></div>
  
  <div class="diagonal_pinstripes"></div>
  
  <div class="little_circles"></div>
  
  <div class="rough_paper"></div>
  
  <div class="crosshatch"></div>
  
</div>

* {
  box-sizing: border-box;
}
body {
  font-family: "Open Sans";
  line-height: 1.618em;
}
.wrapper {
  max-width: 50rem;
  width: 100%;
  margin: 2rem auto;
  border: 0;
}
div {
  width: 22.5rem;
  margin-bottom: 2rem;
  margin-left: 2.5rem;
  float: left;
  height: 10rem;
}

.triangles {
  background-color: #EEE8D0;
  background-image: repeating-linear-gradient( -45deg, 
    transparent, transparent 50%, 
    #F0ECDB 50%, #F0ECDB 
  );
  background-size: 20px 20px;
}

.diagonal_stripes_even {
  background-color: #161616;
  background-image: repeating-linear-gradient(
    135deg,
    #333, #333 25%, 
    transparent 25%, transparent 50%
  );
  background-size: 12px 12px;
}

.diagonal_pinstripes {
  background-color: #161616;
  background-image: repeating-linear-gradient(135deg, 
    #333, #333 10%, 
    transparent 10%, transparent 50%
  );
  background-size: 12px 12px;
}

.little_circles {
  background-color: #2c3e50;
  background-image: repeating-radial-gradient(
    circle,
    #34495e, #34495e 45%,
    transparent 45%, transparent 60%,
    #34495e 60%, #34495e 100%
  );
  background-size: 10px 10px;
}

.rough_paper {
  background-color: #E4D4BB;
  background-image: repeating-radial-gradient(circle, 
    #E4D4BB, #E7DAC6 50%, #E7DAC6 100%
  );
  background-size: 10px 10px;
}

.crosshatch {
  background-color: #161616;
  background-image: repeating-linear-gradient(135deg, 
    #333, #333 10%, 
    transparent 10%, transparent 50%
  ),
  repeating-linear-gradient(-135deg, 
    #333, #333 10%, 
    transparent 10%, transparent 50%
  );
  background-size: 12px 12px;
}