※いろいろな背景をcssで作る備忘録

■斜線パターン

.bg_01{
 background-color: #f8fdff;
 background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.20, #dcf5fe), color-stop(.20, transparent), color-stop(.55, transparent), color-stop(.55, #dcf5fe), color-stop(.70, #dcf5fe), color-stop(.70, transparent), to(transparent));
 -webkit-background-size: 10px 10px;
 background-image: linear-gradient(-45deg, #dcf5fe 20%, transparent 20%, transparent 55%, #dcf5fe 55%, #dcf5fe 70%, transparent 70%, transparent);
 background-size: 10px 10px;
}

■ドットパターン

.bg_02{
background-color: ##231815;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, transparent), color-stop(.5, #fff), to(#fff)), -webkit-gradient(linear, 0 0, 100% 0, color-stop(.5, transparent), color-stop(.5, #fff), to(#fff));
-webkit-background-size: 5px 5px;
background-image: linear-gradient(transparent 50%, #fff 50%, #fff 50%), linear-gradient(90deg, transparent 50%, #fff 50%, #fff 50%);
background-size: 5px 5px;
}

.bg_03{
background-color: #fff;
background-image   : radial-gradient(#ff4d4d 30%, transparent 33%),  radial-gradient(#ff4d4d 30%, transparent 33%);
background-size: 30px 30px;
 background-position: 0 0, 15px 15px;
}