CSS фоны. Коллекция

CSS фоны. Коллекция

CSS фоны. Коллекция

Представляю Вашему вниманию CSS фоны. Выбор состоит из 51 различных стилей. Все эти стили созданы на чистом CSS.

Горошки

Горошки
<!-- HTML -->

<div class="rp_background_peas">
               </div>

<!-- CSS -->

.rp_background_peas  {
background-color:black;
background-image: radial-gradient(grey 15%, transparent 16%),
radial-gradient(grey 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Горизонтальные полосы

Горизонтальные полосы
<!-- HTML -->

<div class="rp_background_hs">
               </div>

<!-- CSS -->

.rp_background_hs  {
background-color:black;
background-image: linear-gradient(transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Вертикальные полосы

<!-- HTML -->

<div class="rp_background_vs">
               </div>

<!-- CSS -->

.rp_background_vs  {
background-color:black;
background-image: linear-gradient(90deg, transparent 50%, rgba(255,255,255,.5) 50%);
background-size: 50px 50px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Диагональные полосы

<!-- HTML -->
 
<div class="rp_background_ds">
               </div>
 
<!-- CSS -->

.rp_background_ds {
background-color:black;
background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Квадраты

<!-- HTML -->
 
<div class="rp_background_sq">
               </div>
 
<!-- CSS -->

.rp_background_sq {
background-color:black;
background-image: linear-gradient(grey 2px, transparent 2px),
linear-gradient(90deg, grey 2px, transparent 2px),
linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Волны

<!-- HTML -->
 
<div class="rp_background_wave">
               </div>
 
<!-- CSS -->

.rp_background_wave {
background: linear-gradient(135deg, #F0F0F0 49%, transparent 49%),
linear-gradient(225deg, #F0F0F0 49%, grey 49%, grey 51%, transparent 51%),
linear-gradient(135deg, transparent 51%, #F0F0F0 51%);
background-size: 7px 7px;
background-color:gray;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Большой ромб

<!-- HTML -->
 
<div class="rp_background_rh">
               </div>
 
<!-- CSS -->

.rp_background_rh{
background-attachment: fixed;
background-color:grey;
background-image: repeating-linear-gradient(120deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
repeating-linear-gradient(60deg, rgba(255,255,255,.1), rgba(255,255,255,.1) 1px, transparent 1px, transparent 60px),
linear-gradient(60deg, rgba(0,0,0,.1) 75%, transparent 50%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1)),
linear-gradient(120deg, rgba(0,0,0,.1) 75%, transparent 50%, transparent 75%, rgba(0,0,0,.1) 75%, rgba(0,0,0,.1));
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;;
}

Красный круг

<!-- HTML -->
 
<div class="rp_background_cr">
               </div>
 
<!-- CSS -->

.rp_background_cr {
 background: radial-gradient(circle at center, maroon, grey, white);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Размытый фон

<!-- HTML -->
 
<div class="rp_background_bl">
               </div>
 
<!-- CSS -->

.rp_background_bl {
background: linear-gradient(180deg, #20203E, grey, black, grey, #20203E);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Овал

<!-- HTML -->
 
<div class="rp_background_vs">
               </div>
 
<!-- CSS -->

.rp_background_oval {
background: radial-gradient( black, #20203E, grey, black, grey, #20203E);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Ромб маленький

<!-- HTML -->
 
<div class="rp_background_rs">
               </div>
 
<!-- CSS -->

.rp_background_rs {
background-image: -webkit-linear-gradient(35deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey), 
-webkit-linear-gradient(-35deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey);
background-image: -moz-linear-gradient(35deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey), 
-moz-linear-gradient(-35deg, grey 25%, transparent 25%, transparent 75%, grey 75%, grey);
background-size:20px 20px;  
 background-color:black;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Клеточный фон

<!-- HTML -->
 
<div class="rp_background_cell">
               </div>
 
<!-- CSS -->

.rp_background_cell {
background-color:grey;
background-size:
 4em 4em, 
 4em 4em, 
 2em 2em, 
 2em 2em, 
 1em 1em, 
 1em 1em;
background-image:  linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,.2) 100%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.4) 50%),
linear-gradient(180deg, transparent 50%, rgba(255,255,255,.2) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.2) 50%),
linear-gradient(-180deg, transparent 50%, rgba(255,255,255,.4) 50%),
linear-gradient(-90deg, transparent 50%, rgba(255,255,255,.4) 50%);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Радуга

<!-- HTML -->
 
<div class="rp_background_rainbow">
               </div>
 
<!-- CSS -->

.rp_background_rainbow {
background: linear-gradient(90deg, rgba(255, 128, 128, 0.65) 0%, rgba(255, 164, 128, 0.65) 10%, rgba(255, 202, 128, 0.65) 20%, rgba(255, 240, 128, 0.65) 30%, rgba(232, 255, 128, 0.65) 40%, rgba(193, 255, 128, 0.65) 50%, rgba(155, 255, 128, 0.65) 60%, rgba(128, 255, 138, 0.65) 70%, rgba(128, 255, 176, 0.65) 80%, rgba(128, 255, 215, 0.65) 90%, rgba(128, 255, 253, 0.65) 100%),
linear-gradient(-90deg, rgba(204, 255, 254, 0.45) 0%, rgba(204, 241, 255, 0.45) 10%, rgba(204, 225, 255, 0.45) 20%, rgba(204, 210, 255, 0.45) 30%, rgba(213, 204, 255, 0.45) 40%, rgba(229, 204, 255, 0.45) 50%, rgba(244, 204, 255, 0.45) 60%, rgba(255, 204, 251, 0.45) 70%, rgba(255, 204, 235, 0.45) 80%, rgba(255, 204, 220, 0.45) 90%, rgba(255, 204, 205, 0.45) 100%);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Шнурки

<!-- HTML -->
 
<div class="rp_background_lace">
               </div>
 
<!-- CSS -->

.rp_background_lace{
background:radial-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
background-color:black;
background-size: 30px 30px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Зебра

<!-- HTML -->
 
<div class="rp_background_zebra">
               </div>
 
<!-- CSS -->

.rp_background_zebra{
background:linear-gradient(45deg, #fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
background-color:black;
background-size: 50px 50px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Горизонтальная зебра

<!-- HTML -->
 
<div class="rp_background_zg">
               </div>
 
<!-- CSS -->

.rp_background_zg{
background:linear-gradient(#fff 3px, transparent 5px, #fff 7px, transparent 9px, #fff 11px, transparent 13px, #fff 15px, transparent 17px, #fff 19px, transparent 21px, #fff 23px, transparent 25px, #fff 27px, transparent 29px, #fff 31px, transparent 33px);
background-color:black;
background-size: 50px 40px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Круг маленький

<!-- HTML -->
 
<div class="rp_background_cirs">
               </div>
 
<!-- CSS -->

.rp_background_cirs{
background:radial-gradient(#fff 20%, transparent 50%), 
linear-gradient(45deg, #fff 10%, transparent 30%);
background-color:black;
background-size: 15px 15px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Схема

<!-- HTML -->
 
<div class="rp_background_circ">
               </div>
 
<!-- CSS -->

.rp_background_circ {
background:linear-gradient(-15deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
linear-gradient(75deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
linear-gradient(-75deg, transparent 15px, #111 18px, #fff 21px, transparent 23px),
linear-gradient(15deg, transparent 15px, #111 18px, #fff 21px, transparent 23px);
background-color:black;
background-size: 35px 35px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Узоры

<!-- HTML -->
 
<div class="rp_background_pat">
               </div>
 
<!-- CSS -->

.rp_background_pat{
background:linear-gradient(45deg, #fff 5%, #111 50%, transparent 40%), 
linear-gradient(-45deg, #111 5%, #fff 50%, transparent 40%);
background-color:black;
background-size: 20px 20px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Множественные круги

<!-- HTML -->
 
<div class="rp_background_mc">
               </div>
 
<!-- CSS -->

.rp_background_mc{
background-color:black;
background-image: -webkit-linear-gradient(30deg, grey, transparent 5px, #fff);
background-image: -moz-linear-gradient(30deg, grey, transparent 5px, #fff);
background-image: linear-gradient(30deg, grey, transparent 5px, #fff);
background-size: 5px 5px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Ячеики

<!-- HTML -->
 
<div class="rp_background_honeycomb">
               </div>
 
<!-- CSS -->

.rp_background_honeycomb  {
background-image: linear-gradient(0deg, transparent 0%, transparent 9px, rgba(255, 255, 255, 0.2) 9px, rgba(255, 255, 255, 0.2) 10px, transparent 10px, transparent 19px, rgba(255, 255, 255, 0.1) 19px, rgba(255, 255, 255, 0.1) 20px, transparent 20px, transparent 29px, rgba(255, 255, 255, 0.1) 29px, rgba(255, 255, 255, 0.1) 30px, transparent 30px, transparent 39px, rgba(255, 255, 255, 0.1) 39px, rgba(255, 255, 255, 0.1) 40px, transparent 40px, transparent 49px, rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px), linear-gradient(-90deg, transparent 0%, transparent 9px, rgba(255, 255, 255, 0.2) 9px, rgba(255, 255, 255, 0.2) 10px, transparent 10px, transparent 19px, rgba(255, 255, 255, 0.1) 19px, rgba(255, 255, 255, 0.1) 20px, transparent 20px, transparent 29px, rgba(255, 255, 255, 0.1) 29px, rgba(255, 255, 255, 0.1) 30px, transparent 30px, transparent 39px, rgba(255, 255, 255, 0.1) 39px, rgba(255, 255, 255, 0.1) 40px, transparent 40px, transparent 49px, rgba(255, 255, 255, 0.1) 49px, rgba(255, 255, 255, 0.1) 50px);
background-size: 100px 100px;
background-image: linear-gradient(-45deg, grey, yellow, black);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Вертикальные линии

<!-- HTML -->
 
<div class="rp_background_vl">
               </div>
 
<!-- CSS -->

.rp_background_vl {
background: #e3e3e3;
background-image:linear-gradient(90deg, #999 15px, transparent 0),
linear-gradient(90deg, #666 37px, transparent 0),linear-gradient(90deg, #333 27px, transparent 0);
background-size: 31px 100%, 75px 100%, 57px 100%;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Декор

<!-- HTML -->
 
<div class="rp_background_decor">
               </div>
 
<!-- CSS -->

.rp_background_decor {
background-color: #44a9a1; 
background-image:radial-gradient(closest-side, transparent 98%, #dbdbd3 99%),
radial-gradient(closest-side, transparent 98%, #dbdbd3 99%), 
linear-gradient(45deg, #1f6e7b 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #1f6e7b 75%, #1f6e7b),
linear-gradient(45deg, #e59438 25%, transparent 25%, transparent),
linear-gradient(45deg, transparent 75%, #e59438 75%, #e59438),
linear-gradient(00deg, transparent 50%, #903b34 50%, #903b34);
background-size: 60px 60px;
background-position: 15px 15px, 45px 45px, 15px 15px, 45px 45px, 45px 45px, 15px 15px, 15px 15px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Пунктирный CSS фон

<!-- HTML -->
 
<div class="rp_background_dotted">
               </div>
 
<!-- CSS -->

.rp_background_dotted {
background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
-moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
-moz-linear-gradient(45deg, transparent 75%, #666 75%), 
-moz-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
-webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
-webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
-webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
-webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
-webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
-o-linear-gradient(-45deg, #666 25%, transparent 25%), 
-o-linear-gradient(45deg, transparent 75%, #666 75%), 
-o-linear-gradient(-45deg, transparent 75%, #666 75%);
background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
linear-gradient(-45deg, #666 25%, transparent 25%), 
linear-gradient(45deg, transparent 75%, #666 75%), 
linear-gradient(-45deg, transparent 75%, #666 75%);
-moz-background-size: 2px 2px;
background-size: 2px 2px;
-webkit-background-size: 2px 2.1px; 
background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Много прямоугольников

<!-- HTML -->
 
<div class="rp_background_rectangles">
               </div>
 
<!-- CSS -->

.rp_background_rectangles {
background: linear-gradient(-45deg, transparent 0%, transparent 33.3%, darkgrey 33.3%, grey 66.6%, transparent 66.6%, transparent 100%),
linear-gradient(45deg, transparent 0%, transparent 33.3%, darkgrey 33.3%, grey 66.6%, transparent 66.6%, transparent 100%),
linear-gradient(-22.5deg, transparent 0%, transparent 8%, darkgrey 8%, darkgrey 10%, 
transparent 10%, transparent 18%, darkgrey 18%, darkgrey 20%, 
transparent 20%, transparent 28%, darkgrey 28%, darkgrey 30%, 
transparent 30%, transparent 38%, darkgrey 38%, darkgrey 40%, 
transparent 40%, transparent 48%, darkgrey 48%, darkgrey 50%, 
transparent 50%, transparent 58%, darkgrey 58%, darkgrey 60%, 
transparent 60%, transparent 68%, darkgrey 68%, darkgrey 70%, 
transparent 70%, transparent 78%, darkgrey 78%, darkgrey 80%, 
transparent 80%, transparent 88%, darkgrey 88%, darkgrey 90%, 
transparent 90%, transparent 98%, darkgrey 98%, darkgrey 100%)0em 2em;
background-color: grey;
background-size: 2.5em 5em;
background-blend-mode: normal;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Шторы

<!-- HTML -->
 
<div class="rp_background_blinds">
               </div>
 
<!-- CSS -->

.rp_background_blinds{
background-color:darkgrey;
background-size: 30% 5%;
background-image: linear-gradient(45deg, rgba(255,0,0,0.5) 25%, transparent 25%, transparent 50%, rgba(255,0,0,0.5) 50%, rgba(255,0,0,0.5) 75%, transparent 75%, transparent ), linear-gradient(-45deg, rgba(255,0,0,0.5) 25%, rgba(0,255,0,0.5) 25%, rgba(0,255,0,0.5) 50%, rgba(255,0,0,0.5) 50%, rgba(255,0,0,0.5) 75%, rgba(0,255,0,0.5) 75%, rgba(0,255,0,0.5) );
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Мед

<!-- HTML -->
 
<div class="rp_background_honey">
               </div>
 
<!-- CSS -->

.rp_background_honey {
background: linear-gradient( 135deg, transparent 0%, transparent 45%, white 48%, black 52%, transparent 55% ) 0px 0px,
linear-gradient( 45deg, transparent 0%, transparent 45%, white 48%, black 52%, transparent 55% ) 0px 0px,
linear-gradient( 45deg, blue, yellow, red ) 0px 0px;
background-size: 50px 50px, 50px 50px, 100% 100%;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Карты

<!-- HTML -->
 
<div class="rp_background_cards">
               </div>
 
<!-- CSS -->

.rp_background_cards  {
background:linear-gradient( 135deg, #bbb 0%, #bbb 12.5%, transparent 12.5%, transparent 37.5%, #bbb 37.5%, #bbb 62.5%, transparent 62.5%, transparent 87.5%, #bbb 87.5%, #bbb 100% ) 0px 0px,
linear-gradient( 45deg, #bbb 0%, #bbb 12.5%, transparent 12.5%, transparent 37.5%, #bbb 37.5%, #bbb 62.5%, transparent 62.5%, transparent 87.5%, #bbb 87.5%, #bbb 100% ) 0px 0px,
linear-gradient( 90deg, black 0%, black 40%, white 40%, white 50%, black 50%, black 60%, white 60%, white 100% ) 0px 0px;
background-size: 160px 80px;
background-color:black;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Паркет

<!-- HTML -->
 
<div class="rp_background_parquet">
               </div>
 
<!-- CSS -->

.rp_background_parquet {
background:
linear-gradient( 225deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 37.5px -37.5px,
linear-gradient( 135deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 37.5px 112.5px,
linear-gradient( 135deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 37.5px 37.5px,
linear-gradient( 225deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 37.5px 37.5px,
linear-gradient( 135deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 75px 0px,
linear-gradient( 225deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 75px 0px,
linear-gradient( 135deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 75px 75px,
linear-gradient( 225deg, transparent 0%, transparent 24.5%,
                    white 24.5%, white 25.5%,
                    transparent 25.5% ) 75px 75px;
background-size: 150px 150px;
background-color:grey;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Шахматы

<!-- HTML -->
 
<div class="rp_background_chess">
               </div>
 
<!-- CSS -->

.rp_background_chess{
background-color: #eee;
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -ms-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -o-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Дождь

<!-- HTML -->
 
<div class="rp_background_rain">
               </div>
 
<!-- CSS -->

.rp_background_rain {
background-color:grey;
background-size: 58px 58px;
background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;
background-image: -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px), -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px), -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px), -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: -moz-linear-gradient(115deg, #C90032 23px, transparent 23px), -moz-linear-gradient(295deg, #C90032 23px, transparent 23px), -moz-linear-gradient(115deg, #C90032 23px, transparent 23px), -moz-linear-gradient(295deg, #C90032 23px, transparent 23px), -moz-linear-gradient(115deg, #C90032 10px, transparent 10px), -moz-linear-gradient(295deg, #C90032 10px, transparent 10px), -moz-linear-gradient(115deg, #C90032 10px, transparent 10px), -moz-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: -ms-linear-gradient(115deg, #C90032 23px, transparent 23px), -ms-linear-gradient(295deg, #C90032 23px, transparent 23px), -ms-linear-gradient(115deg, #C90032 23px, transparent 23px), -ms-linear-gradient(295deg, #C90032 23px, transparent 23px), -ms-linear-gradient(115deg, #C90032 10px, transparent 10px), -ms-linear-gradient(295deg, #C90032 10px, transparent 10px), -ms-linear-gradient(115deg, #C90032 10px, transparent 10px), -ms-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: -o-linear-gradient(115deg, #C90032 23px, transparent 23px), -o-linear-gradient(295deg, #C90032 23px, transparent 23px), -o-linear-gradient(115deg, #C90032 23px, transparent 23px), -o-linear-gradient(295deg, #C90032 23px, transparent 23px), -o-linear-gradient(115deg, #C90032 10px, transparent 10px), -o-linear-gradient(295deg, #C90032 10px, transparent 10px), -o-linear-gradient(115deg, #C90032 10px, transparent 10px), -o-linear-gradient(295deg, #C90032 10px, transparent 10px);
background-image: linear-gradient(115deg, #C90032 23px, transparent 23px), linear-gradient(295deg, #C90032 23px, transparent 23px), linear-gradient(115deg, #C90032 23px, transparent 23px), linear-gradient(295deg, #C90032 23px, transparent 23px), linear-gradient(115deg, #C90032 10px, transparent 10px), linear-gradient(295deg, #C90032 10px, transparent 10px), linear-gradient(115deg, #C90032 10px, transparent 10px), linear-gradient(295deg, #C90032 10px, transparent 10px);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Птицы

<!-- HTML -->
 
<div class="rp_background_bird">
               </div>
 
<!-- CSS -->

.rp_background_bird {
background: -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, -webkit-linear-gradient(54deg, #232927 4%, transparent 4%) 30px 43px, -webkit-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, -webkit-linear-gradient(54deg, #232927 4%, transparent 4%) 80px 93px, -webkit-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, -moz-linear-gradient(54deg, #232927 4%, transparent 4%) 30px 43px, -moz-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, -moz-linear-gradient(54deg, #232927 4%, transparent 4%) 80px 93px, -moz-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: -ms-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, -ms-linear-gradient(54deg, #232927 4%, transparent 4%) 30px 43px, -ms-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, -ms-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, -ms-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, -ms-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, -ms-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, -ms-linear-gradient(54deg, #232927 4%, transparent 4%) 80px 93px, -ms-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, -ms-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, -ms-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, -ms-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: -o-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, -o-linear-gradient(54deg, #232927 4%, transparent 4%) 30px 43px, -o-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, -o-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, -o-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, -o-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, -o-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, -o-linear-gradient(54deg, #232927 4%, transparent 4%) 80px 93px, -o-linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, -o-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, -o-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, -o-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background: linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient(54deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient(54deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient(18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color:black;
background-size: 100px 100px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Ручей

<!-- HTML -->
 
<div class="rp_background_creek">
               </div>
 
<!-- CSS -->

.rp_background_creek {
background: -moz-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: -webkit-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: -ms-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: -o-radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background: radial-gradient(0% 2%, circle, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), none;
background-size: 20px 20px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Любовь

<!-- HTML -->
 
<div class="rp_background_love">
               </div>
 
<!-- CSS -->

.rp_background_love {
background-color: #BB0033;
background-image: -webkit-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%), -webkit-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -webkit-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -webkit-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-image: -moz-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -moz-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -moz-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -moz-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -moz-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%), -moz-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -moz-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -moz-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -moz-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -moz-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-image: -ms-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -ms-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -ms-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -ms-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -ms-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%), -ms-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -ms-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -ms-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -ms-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -ms-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-image: -o-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -o-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -o-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -o-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -o-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%), -o-radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -o-radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), -o-radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -o-radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), -o-radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-image: radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%),radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%), radial-gradient(60% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(40% 43%, circle closest-side, #BB0033 26%, rgba(187, 0, 51, 0) 27%), radial-gradient(40% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(60% 22%, circle closest-side, #DD3355 45%, rgba(221, 51, 85, 0) 46%), radial-gradient(50% 35%, circle closest-side, #DD3355 30%, rgba(221, 51, 85, 0) 31%);
background-position: 0 0%, 0 0%, 0 0%, 0 0%, 0 0%, 50px 50px, 50px 50px, 50px 50px, 50px 50px, 50px 50px;
background-size: 100px 100px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Ручеек

<!-- HTML -->
 
<div class="rp_background_rill">
               </div>
 
<!-- CSS -->

.rp_background_rill {
background-image: -webkit-radial-gradient(100% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), -webkit-radial-gradient(0% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-image: -moz-radial-gradient(100% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), -moz-radial-gradient(0% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-image: -o-radial-gradient(100% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), -o-radial-gradient(0% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-image: -ms-radial-gradient(100% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), -ms-radial-gradient(0% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-image: radial-gradient(100% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent), radial-gradient(0% 50% , circle , transparent 20%, rgba(255, 255, 255, 0.3) 21%, rgba(255, 255, 255, 0.3) 34%, transparent 35%, transparent);
background-color: slategray;
background-size:75px 100px;
background-position: 0 0%, 0 -50px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Стена

<!-- HTML -->
 
<div class="rp_background_wall">
               </div>
 
<!-- CSS -->

.rp_background_wall {
background-color: slategray;
background-image: -webkit-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -webkit-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -webkit-linear-gradient(#A8B1BB 8px, transparent 8px), -webkit-linear-gradient(0deg, #A8B1BB 8px, transparent 8px);
background-image: -moz-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -moz-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -moz-linear-gradient(#A8B1BB 8px, transparent 8px), -moz-linear-gradient(0deg, #A8B1BB 8px, transparent 8px);
background-image: -o-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -o-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -o-linear-gradient(#A8B1BB 8px, transparent 8px), -o-linear-gradient(0deg, #A8B1BB 8px, transparent 8px);
background-image: -ms-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -ms-radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), -ms-linear-gradient(#A8B1BB 8px, transparent 8px), -ms-linear-gradient(0deg, #A8B1BB 8px, transparent 8px);
background-image: radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), radial-gradient(circle , transparent 20%, slategray 20%, slategray 80%, transparent 80%, transparent), linear-gradient(#A8B1BB 8px, transparent 8px), linear-gradient(0deg, #A8B1BB 8px, transparent 8px);
background-position: 0 0%, 50px 50px, 0 -4px, -4px 0;
background-size: 100px 100px, 100px 100px, 50px 50px, 50px 50px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Рубашка

<!-- HTML -->
 
<div class="rp_background_shirt">
               </div>
 
<!-- CSS -->

.rp_background_shirt {
background-color: #E9D4B8;
background-image: -webkit-repeating-linear-gradient(45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 120px, rgba(10, 35, 45, 0.5) 120px, rgba(10, 35, 45, 0.5) 140px), -webkit-repeating-linear-gradient(-45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 140px, rgba(10, 35, 45, 0.5) 140px, rgba(10, 35, 45, 0.5) 160px);
background-image: -moz-repeating-linear-gradient(45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 120px, rgba(10, 35, 45, 0.5) 120px, rgba(10, 35, 45, 0.5) 140px), -moz-repeating-linear-gradient(-45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 140px, rgba(10, 35, 45, 0.5) 140px, rgba(10, 35, 45, 0.5) 160px);
background-image: -o-repeating-linear-gradient(45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 120px, rgba(10, 35, 45, 0.5) 120px, rgba(10, 35, 45, 0.5) 140px), -o-repeating-linear-gradient(-45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 140px, rgba(10, 35, 45, 0.5) 140px, rgba(10, 35, 45, 0.5) 160px);
background-image: -ms-repeating-linear-gradient(45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 120px, rgba(10, 35, 45, 0.5) 120px, rgba(10, 35, 45, 0.5) 140px), -ms-repeating-linear-gradient(-45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 140px, rgba(10, 35, 45, 0.5) 140px, rgba(10, 35, 45, 0.5) 160px);
background-image: repeating-linear-gradient(45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 120px, rgba(10, 35, 45, 0.5) 120px, rgba(10, 35, 45, 0.5) 140px), repeating-linear-gradient(-45deg, transparent 5px, rgba(10, 35, 45, 0.5) 5px, rgba(10, 35, 45, 0.5) 10px, rgba(210, 118, 110, 0) 10px, rgba(210, 118, 110, 0) 35px, rgba(210, 118, 110, 0.5) 35px, rgba(210, 118, 110, 0.5) 40px, rgba(10, 35, 45, 0.5) 40px, rgba(10, 35, 45, 0.5) 50px, rgba(10, 35, 45, 0) 50px, rgba(10, 35, 45, 0) 60px, rgba(210, 118, 110, 0.5) 60px, rgba(210, 118, 110, 0.5) 70px, rgba(246, 179, 84, 0.5) 70px, rgba(246, 179, 84, 0.5) 80px, rgba(246, 179, 84, 0) 80px, rgba(246, 179, 84, 0) 90px, rgba(210, 118, 110, 0.5) 90px, rgba(210, 118, 110, 0.5) 110px, rgba(210, 118, 110, 0) 110px, rgba(210, 118, 110, 0) 140px, rgba(10, 35, 45, 0.5) 140px, rgba(10, 35, 45, 0.5) 160px);
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Зигзаг

<!-- HTML -->
 
<div class="rp_background_zig">
               </div>
 
<!-- CSS -->

.rp_background_zig {
background-color:grey;
background-size: 330px 330px;
background-image: linear-gradient(25deg, #ccbbee 25%, transparent 25%), linear-gradient(-25deg, #ccbbee 25%, transparent 25%), linear-gradient(155deg, #ccbbee 25%, transparent 25%), linear-gradient(-155deg, #ccbbee 25%, transparent 25%);
background-position: 0px -150px, 0px -150px, 150px -150px, 150px -150px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Дот

<!-- HTML -->
 
<div class="rp_background_dot">
               </div>
 
<!-- CSS -->

.rp_background_dot{
background: radial-gradient(blue 5%, transparent 20%) 50px 50px, radial-gradient(green 5%, transparent 10%), radial-gradient(green 5%, transparent 20%), radial-gradient(yellow 5%, transparent 10%);
background-size: 150px 150px;
background-position: 37.5px -50px, -37.5px -50px, 0px 25px, -75px 25px;
background-color:white;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Кусты

<!-- HTML -->
 
<div class="rp_background_bushes">
               </div>
 
<!-- CSS -->

.rp_background_bushes {
background-image: radial-gradient(circle at 100% 150%, lightsteelblue 18%, steelblue 24%, steelblue 25%, steelblue 28%, lightsteelblue 29%, steelblue 36%, steelblue 36%, steelblue 40%, transparent 40%, transparent),radial-gradient(circle at 0    150%, lightsteelblue 18%, steelblue 24%, steelblue 25%, steelblue 28%, lightsteelblue 29%, steelblue 36%, steelblue 36%, steelblue 40%, transparent 40%, transparent),
radial-gradient(circle at 50%  100%, steelblue 10%, lightsteelblue 11%, steelblue 23%, steelblue 24%, steelblue 30%, lightsteelblue 31%, steelblue 43%, steelblue 44%, steelblue 50%, lightsteelblue 51%, steelblue 63%, steelblue 64%, steelblue 71%, transparent 71%, transparent),
radial-gradient(circle at 100% 50%, steelblue 5%, lightsteelblue 6%, steelblue 15%, steelblue 16%, steelblue 20%, lightsteelblue 21%, steelblue 30%, steelblue 31%, steelblue 35%, lightsteelblue 36%, steelblue 45%, steelblue 46%, steelblue 49%, transparent 50%, transparent),
radial-gradient(circle at 0    50%, steelblue 5%, lightsteelblue 6%, steelblue 15%, steelblue 16%, steelblue 20%, lightsteelblue 21%, steelblue 30%, steelblue 31%, steelblue 35%, lightsteelblue 36%, steelblue 45%, steelblue 46%, steelblue 49%, transparent 50%, transparent);
background-size: 100px 50px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

CSS фоны — Морские капли

<!-- HTML -->
 
<div class="rp_background_sea">
               </div>
 
<!-- CSS -->

.rp_background_sea {
background:linear-gradient(45deg, #28a3cf 25%, transparent 25%, transparent 75%, #28a3cf 75%, #28a3cf);
background-color: #30a9d5;
background-size: 20px 20px;
width:100%;  
height:500px;
padding:50px 0px;
margin:80px 0px;
}

Aliexpress INTAliexpress INTAliexpress INT

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *