How to set different sizes for multiple background "chessboard+center_lines"

I want to do this using only the one background property.

But the chessboard background is not 64 x 64 and has 384 x 256 size

Chessboard MUST_BE 64 x 64

This is my attempt:

<!DOCTYPE html><style>
body { margin:0; background-color:#000 }
div { 
  width: 768px;
  height: 512px;
  background: conic-gradient(from 90deg at 1px 1px,#0000 90deg,#5a5 0) 384px 256px,
              repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 64px 64px
}

</style><div></div>

Solution

You are setting the position, not the size. The correct syntax is position / size where size is optional.

And you can use 50% 50% for the size of the first gradient, no need to do the calculation manually

body {
  margin: 0;
  background-color: #000
}

div {
  width: 768px;
  height: 512px;
  background: 
   conic-gradient(from 90deg at 1px 1px, #0000 90deg, #5a5 0) 0 0/50% 50%, 
   repeating-conic-gradient(#a55 0% 25%, #105 25% 50%) 0 0/64px 64px
}

<div></div>