background-image:

バックグランドの画像を読み込みます。

background-image:

読み込まれたエリアいっぱいに連ねて表示します。

.bg0{

background-image:url(

"../タケノコ.jpg"

);

}

repeating-linear-gradient()関数

横格子1

background-image:
repeating-linear-gradient(
#000 ,
#000 1px,
#fff 1px,
#fff 32px);

横格子2

repeating-linear-gradient(
#000 ,
#000 1px,
#fff 1px,
#fff 24px);
改行幅に合わせることもできそうです。

横縞模様

繰り返し幅を短くして,更に細かくしていきます。縞模様ができました。

repeating-linear-gradient(
#888 ,
#000 1px,
#fff 1px,
#fff 2px);

横縞模様3

repeating-linear-gradient(
#088 ,
#fff );
水色をイメージしてグラデーションにしました。
与えられた幅を目いっぱい使ってグラディエイトします。

横縞模様4

repeating-linear-gradient(
#f00,
#c80,
#cc0,
#8f0,
#0f8,
#08f,
#00f);
色はいくつも混ぜることができます。
与えられた幅を目いっぱい使ってグラディエイトします。
虹色ができました。

横縞模様5

50%で区切ると,くっきり半分にわかれます。

repeating-linear-gradient(
#088,
#088 50%,
#999 50%,
#999);

縦縞模様

repeating-linear-gradient(
90deg,
#000 ,
#000 1px,
#fff 1px,
#fff 24px);

縦縞模様2

黒線を太くします。 background-image:
repeating-linear-gradient(
90deg,
#000 ,
#000 12px,
#fff 1px,
#fff 24px);

repeating-linear-gradient(
90deg,
#000 ,
#000 12px,
#fff 1px,
#fff 24px);

縦横縞模様

background-color:#888;
background-image:
repeating-linear-gradient(
0deg,
#000 ,
#000 1px,
#fff 1px,
#fff 32px);
repeating-linear-gradient(
90deg,
#000 ,
#000 1px,
transparent 1px,
transparent 32px),

縦横縞模様2

background-color:#888;
background-image:
repeating-linear-gradient(
0deg,
#000 ,
#000 1px,
#fff 1px,
#fff 32px),
repeating-linear-gradient(
90deg,
#000 ,
#000 1px,
transparent 1px,
transparent 32px);

background-size

バックグランドの大きさを指定します。

縞模様の元縦グラデーションです

background-size: 100px 100px;
background-repeat: repeat;
background-image:
linear-gradient(
transparent,
rgba(0, 0, 0, 1));

縞模様細かく繰り返します

background-size: 50px 20px;
background-repeat: repea
t;
background-image:
linear-gradient(
transparent,
rgba(0, 0, 0, 1));

縞模様をはっきりさせます

background-size: 50px 20px;
background-repeat: repea
t;
background-image:
linear-gradient(
#fff　95%,
#000 5%);

縞模様縦横にして更に細かくし,色も付けます

background-size: 10px 10px;
background-repeat: repeat;
background-image:
linear-gradient(
transparent,
#8f8
),
linear-gradient(
90deg,
transparent,#0f0);

少し大きい模様も魅力的です。

background-color: violet;
background-size: 50px 50px;
background-repeat: repeat;
background-image:
linear-gradient(
90deg,
rgba(145,82,56,.5) 50%,transparent 50%
),
linear-gradient(
rgba(145,82,56,.5) 20%,transparent 20%
);

斜めの模様もいいです。

background-color: violet;
background-size: 50px 50px;
background-repeat: repeat;
background-image:
linear-gradient(
45deg,
rgba(45, 145, 200, 0.5) 50%,transparent 50%
),
linear-gradient(
-45deg,
rgba(45, 145, 200, 0.5) 50%,transparent 50%
);

山のようにも波のようにも見えます。

background-color: violet;
background-size: 50px 50px;
background-repeat: repeat;
background-image:
linear-gradient(
45deg,
rgba(45, 145, 200, 0.5) 50%,transparent 50%
),
linear-gradient(
-45deg,
rgba(45, 145, 200, 0.5) 50%,transparent 50%
);

縦横斜めです。

background-color: violet;
background-size: 50px 50px;
background-repeat: repeat;
background-image:
linear-gradient(
45deg,
rgba(45, 145, 200, 0.5) 50%,transparent 50%
),
linear-gradient(
-45deg,
rgba(45, 145, 200, 0.5) 50%,transparent 50%
);

たけ

background-position: 50% 50%;
background-image:
repeating-linear-gradient(
90deg,#000,transparent 22px),
repeating-linear-gradient(
#000,#000 1px,
transparent 1px,
transparent 30px),
repeating-linear-gradient(
#000 ,#000 1px,#fff 1px,#8f8 28px);
}

瓦

background-size: 20vw,20vw;
background-image:
repeating-linear-gradient(
90deg,#000,transparent 2vw),
repeating-linear-gradient(
#000,#000 0.3vw,
transparent 3vw,
transparent 3vw);

ヤシ21

background-size: 3vw,20vw;
background-image:
repeating-linear-gradient(
90deg,
#000,
transparent 22px),
repeating-linear-gradient(
#000 2px,
#cfc 5px),
repeating-linear-gradient(
#000,
#000 1px,
#fda 1px,
#fda 28px);

???

.bgg{ background-position: 50px;
background-size: 50px 50px;
background-repeat: repeat-y;
background-image:
linear-gradient(
90deg,
#000,
transparent 50px),
repeating-linear-gradient(
#000,
#000 1px,
#fda 1px,
#fda 20px);
}