<div id="blackWhiteBackground">
</div>

body, html{
  padding: 0;
  margin: 0;
  min-height: 100vh;
  font-family: Helvetica;
  text-align: center;
  background: #05050555;
}
#blackWhiteBackground{
  display: grid;
  gap: 30px;
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: -2;
  transform: translate(-50%, -50%);
}
#blackWhiteBackground div{
  position: relative;
  width: 155px;
  height: 155px;
  box-sizing: border-box;
}
#blackWhiteBackground div:nth-child(even){
  background: #050505;
  border: 3px solid #757575;
  border-radius: 50%;
  border-radius: 50%;
}
#blackWhiteBackground div:nth-child(odd){
  background: #fff;
  border: 1px solid #050505;
}

function onresizeNow(){
  let blackWhiteLengthA = Math.floor(document.body.clientWidth / 155) + 1;
  if(blackWhiteLengthA % 2 == 0){
    blackWhiteLengthA += 1;
  }
  let blackWhiteLengthB = Math.floor(document.body.clientHeight / 155) + 1;
  let blackWhiteBackgroundZ = document.getElementById("blackWhiteBackground");
  blackWhiteBackgroundZ.innerHTML = "";
  let gridTemplateColumnsZ = "";
  for(let z=0; z<blackWhiteLengthA; z++){
    gridTemplateColumnsZ += " auto ";
  }
  blackWhiteBackgroundZ.style.gridTemplateColumns = gridTemplateColumnsZ;

  for(let i=0; i<blackWhiteLengthA*blackWhiteLengthB; i++){
    let blackWhiteElement = document.createElement("div");
    blackWhiteBackgroundZ.append(blackWhiteElement);
  }
}
firstNow = true;
let timeoutNow;
window.onresize = function(){
  if(firstNow){
    firstNow = false;
  }
  else{
    clearTimeout(timeoutNow);
  }
  timeoutNow = setTimeout(onresizeNow, 100);
};
onresizeNow();