title: CSS 4 color checkers background
body: <p>I am trying to create 4 color checker background using linear gradient but not sure how can I fill the entire background with the checker.
  Here is the current implementation:</p>
  <p>Code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tab-content {
    width: 500px;
    height: 500px;
    background-image: linear-gradient(to right, red 50%, blue 50%), linear-gradient(to right, green 50%, yellow 50%);
    background-size: 20px 10px;
    background-position: 0 0, 0 10px;
    background-repeat: no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab-content"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Also attaching the current implementation.
  <a href="https://i.stack.imgur.com/lncQi.png" rel="nofollow noreferrer">Current implementation of checker background</a></p>