How to create a responsive checkerboard background

Question

I want to have a resposive checkerboard background that should look like the background in a color selector:

What I tried:

.chess {
  background-image: 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px), 
    linear-gradient(90deg, white 30px, #999 30px), 
    linear-gradient(90deg, #999 30px, white 30px);
  background-position: 0 0, 0 30px, 0 60px, 0 90px, 0 120px;
  background-repeat: repeat-x;
  background-size: 60px 30px;
  height: 150px;
  margin: 15px auto;
  width: 30%;
}


.fas {
  text-align: center;
  font-size: 10em
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car"></i>
  </div>
<div>

Problems:

• My result is not resposive. (I have fixed pixel sizes)
• I would need a lot of code if I have a larger background or smaller elements.
• I did not achieve to center the pattern or use background-repeat: round

If it is possible I don't want any cut off elements in the checkerboard background.

Not like this (cut off on the right and bottom):

Answer 1

Here is an idea that rely on conic-gradient but supported only on Chrome actually:

.chess {
  background:
    conic-gradient(#fff 0deg ,#fff 90deg,
                   grey 90deg,grey 180deg,
                   #fff 180deg,#fff 270deg,
                   grey 270deg,grey 360deg) 0 0/25% 25%;
  margin: 15px;
  padding:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

You can also consider round of background-repeat if you want to have the same size and no cut off:

.chess {
  background:
    conic-gradient(#fff 0deg ,#fff 90deg,
                   grey 90deg,grey 180deg,
                   #fff 180deg,#fff 270deg,
                   grey 270deg,grey 360deg) 0 0/40px 40px round;
  margin: 15px;
  padding:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

---

Here is a similar idea using SVG instead of gradient where you will have better support:

.chess {
  background:
    url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none"  viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>') 0 0/25% 25%;
  margin: 15px;
  padding:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

And with a fixed size:

.chess {
  background:
    url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none"  viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0" width="5" height="5" fill="grey" /><rect x="5" y="5" width="5" height="5" fill="grey" /><rect x="5" y="0" width="5" height="5" fill="white" /><rect x="0" y="5" width="5" height="5" fill="white" /></svg>') 0 0/40px 40px round;
  margin: 15px;
  padding:10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-7x fa-car"></div>
<div class="chess fas fa-5x fa-car"></div>
<div class="chess fas fa-10x fa-user"></div>
<div class="chess fas fa-3x fa-phone"></div>

Answer 2

Not entirely sure on what you're trying to do, but I've created the following for you. This will fill whatever width your screen is with the checkered background, and not be cut off on smaller screens.

body {
    background-image:
      -moz-linear-gradient(45deg, #999 25%, transparent 25%), 
      -moz-linear-gradient(-45deg, #999 25%, transparent 25%),
      -moz-linear-gradient(45deg, transparent 75%, #000 75%),
      -moz-linear-gradient(-45deg, transparent 75%, #000 75%);
    background-image:
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #999), color-stop(.25, transparent)), 
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #999), color-stop(.25, transparent)),
      -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #999)),
      -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #999));
    -moz-background-size:100px 100px;
    background-size:100px 100px;
    -webkit-background-size:100px 101px; /* override value for shitty webkit */
    background-position:0 0, 50px 0, 50px -50px, 0px 50px;
}

div.fa-car {
  font-size:10rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet"/>

<div class="chess fas fa-car"/>

JSFiddle

Answer 3

Use this:

.chess {
  background-image:
    linear-gradient(45deg, #ccc 25%, transparent 25%),
    linear-gradient(-45deg, #ccc 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #ccc 75%),
    linear-gradient(-45deg, transparent 75%, #ccc 75%);
  background-size: 60px 60px;
  background-position: 0 0, 0 29px, 29px -29px, -29px 0px;
}
.btn {}

.fas {
  color: black;
  text-align: center;
  font-size: 10em;
}


.fas.f5em {
  font-size: 5em;
}

.fas.f35em {
  font-size: 35em;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car"></i>
  </div>
<div>

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car f5em"></i>
  </div>
<div>

<div>
  <div class="btn btn-outline-secondary chess">
  <i class="fas fa-car f35em"></i>
  </div>
<div>

OR you can use pattern image like:

https://mdn.mozillademos.org/files/5705/alpha.png