demo-bg-color-checkered

common.css

.color-checkered{
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: 80%;
  max-width: 400px;
  height: 200px;
  margin: 0 auto;
  font-size: 40px;
}

demo-bg-color-checkered1.html

<div id="color-checkered1" class="color-checkered">content</div>

<script>
  const el_color_checkered1 = document.getElementById('color-checkered1');
  const bg_color_checkered1 = new bgColorCheckered(el_color_checkered1,[
    ['#FFCDD2', '#FFCCBC', '#FFF9C4', '#C8E6C9', '#BBDEFB', '#C5CAE9', '#D1C4E9'],
    ['#EF9A9A', '#FFAB91', '#FFF59D', '#A5D6A7', '#90CAF9', '#9FA8DA', '#CE93D8']
  ]);
</script>

demo-bg-color-checkered2.html

<div id="color-checkered2" class="color-checkered">content</div>

<script>
  const el_color_checkered2 = document.getElementById('color-checkered2');
  const bg_color_checkered2 = new bgColorCheckered(el_color_checkered2,[
    ['#FFCDD2', '#FFCCBC', '#FFF9C4', '#C8E6C9', '#BBDEFB', '#C5CAE9', '#D1C4E9'],
    ['#EF9A9A', '#A5D6A7', '#90CAF9']
  ]);
</script>

demo-bg-color-checkered3.html

<div id="color-checkered3" class="color-checkered">content</div>

<script>
  const el_color_checkered3 = document.getElementById('color-checkered3');
  const bg_color_checkered3 = new bgColorCheckered(el_color_checkered3,[
    ['#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc'],
    ['#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee'],
    ['#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc'],
    ['#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee'],
    ['#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc'],
    ['#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee']
  ]);
</script>

demo-bg-color-checkered4.html

<style>
  .s-expand4{
    background-size: 100% 100%;
  }
</style>

<div class="settings">
  <select id="sel-bg4">
    <option value="repeat">繰り返し</option>
    <option value="expand">拡大</option>
  </select>
  <button id="bt-submit4">高さ変更</button>
</div>
<div id="color-checkered4" class="color-checkered">content</div>

<script>
  const el_color_checkered4 = document.getElementById('color-checkered4');
  const bg_color_checkered4 = new bgColorCheckered(el_color_checkered4,[
    ['#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc'],
    ['#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee'],
    ['#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc'],
    ['#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee', '#cccccc', '#eeeeee']
  ]);
  document.getElementById('bt-submit4').addEventListener('click',()=>{
    el_color_checkered4.classList.toggle('h320');
  });
  const el_sel_bg4 = document.getElementById('sel-bg4');
  el_sel_bg4.addEventListener('change',()=>{
    if(el_sel_bg4.value==='expand'){
      el_color_checkered4.classList.add('s-expand4');
    }else{
      el_color_checkered4.classList.remove('s-expand4');
    }
  });
</script>