CSS 画像を使わずに模様をつくる。

グラデーションを利用して模様をつくる。

html

<div class="wrap"></div>

CSS

.wrap{
  /* 任意のサイズ */
  width: 100%;
  height: 100%;

  /* 背景模様 */
  background-image: 
    linear-gradient(to left,   transparent 100px, blue),
    linear-gradient(to bottom, transparent 100px, green);

  /* 背景画像サイズ 幅,高さ */
  background-size: 102px 102px;

  /* 背景画像を繰り返し表示 */
  background-repeat: repeat;
}

グラデーションを指定する

background-image: 
    linear-gradient(to left,   transparent 100px, blue),
    linear-gradient(to bottom, transparent 100px, green);

指定したグラデーションのサイズを指定

background-size: 102px 102px;

グラデーションを繰り返し表示させる

background-repeat: repeat;