<div class="__bg__dot">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="__bg__check">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="__bg__grid">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div class="__bg__stripe">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>

body {
  margin: 0;
}
[class*="__bg__"] {
  clip-path: inset(0);
  display: flow-root;
  min-height: 100vh;
}
[class*="__bg__"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
}
.__bg__dot::before {
  background: linear-gradient(45deg, #c0c0c0 25%, transparent 25%) 0 0/16px 16px,
    linear-gradient(225deg, #c0c0c0 25%, transparent 25%) 8px 8px/16px 16px;
}
.__bg__check::before {
  background: linear-gradient(
        45deg,
        #c0c0c0 25%,
        transparent 25%,
        transparent 75%,
        #c0c0c0 75%
      )
      0 0/16px 16px,
    linear-gradient(
        45deg,
        #c0c0c0 25%,
        transparent 25%,
        transparent 75%,
        #c0c0c0 75%
      )
      8px 8px/16px 16px;
}
.__bg__grid::before {
  background: linear-gradient(0deg, #c0c0c0 50%, transparent 50%) 0 0/16px 16px,
    linear-gradient(90deg, transparent 50%, #c0c0c0 50%) 0 0/16px 16px;
}
.__bg__stripe::before {
  background: repeating-linear-gradient(
    0deg,
    #c0c0c0,
    #c0c0c0 8px,
    transparent 8px,
    transparent 16px
  );
}