Фон на чистом css. Примеры.

Фон для сайта на чистом css имеет преимущество перед обычным фоном из картинки - здесь выгода не только в размерах файлов, но и в запросах к серверу.

В кругу верстальщиков фона на CSS называют - паттерны для сайта

Вот наиболее распостраненые исходники для написания своего собственного фона, можно легко менять расцветки и размеры в рисунке фона.

-----

Ну а если нужен фон с прозрачним рисунком и своим цветом.

Вот сайт в помощь - https://www.transparenttextures.com/

-----

1. Фон в клеточку.

.fon1 {
background-color: #269;
background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px;
background-image:
 linear-gradient(white 2px, transparent 2px),
 linear-gradient(90deg, white 2px, transparent 2px),
 linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
 linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px);
}
 

2. Фон в виде горизонтальных линий на css3:

.fon2 {
background-size: 50px 50px;
background-color: #3d5762;
background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

3. Baackground из вертикальных линий:

.fon3 {
background-size: 50px 50px;
background-color: #726144;
background-image: linear-gradient(90deg, #5a4e39 50%, transparent 50%, transparent);
}

4. Сетка из горизонтальных и вертикальных линий:

.fon4 {
background-size: 50px 50px;
background-color: #ddd;
background-image: linear-gradient(transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5)),
linear-gradient(90deg, transparent 50%, rgba(0, 108, 21, .5) 50%, rgba(0, 108, 21, .5));
}

5. Из линий под углом 45 градусов тоже можно создать фон для сайта:

.fon5 {
background-size: 50px 50px;
background-color: #740064;
background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%,                transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,                 transparent 75%, transparent);
}

/* наклон в противоположную сторону */
.fon62 {
background-size: 50px 50px;
background-color: #0c6e12;
background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%,
transparent 75%, transparent);
}

6. Фон в виде шахматной клетки - и тоже на чистом CSS:

.fon6 {
background-color: #eee;
background-size: 60px 60px;
background-position: 0 0, 30px 30px;
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);
}

7. Фон плиткой:

.fon7 {
background-color: #eee;
background-size: 60px 60px;
background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black);
}

8. Очень мелкий градиент создат илизию шереховатости:

.fon8 {
background: linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%), linear-gradient(45deg, #292929 25%, transparent 25%, transparent 75%, #292929 75%) 0.1875em 0.1875em, radial-gradient(at 50% 0, #484847, #090909);
background-size: 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
}

9. Фон из звездочек:

.fon9 {
ackground: -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: linear-gradient(324deg, #232927 4%,   transparent 4%) -70px 43px,
            linear-gradient( 36deg, #232927 4%,   transparent 4%) 30px 43px,
            linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px,
            linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px,
            linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px,
            linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px,
            linear-gradient(324deg, #232927 4%,   transparent 4%) -20px 93px,
            linear-gradient( 36deg, #232927 4%,   transparent 4%) 80px 93px,
            linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px,
            linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px,
            linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px,
            linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px;
background-color: #232927;
background-size: 100px 100px;
}

10. CSS фон лесенкой:

.fon10 {
background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px;
background-image: linear-gradient(335deg, #C90032 23px, transparent 23px),
linear-gradient(155deg, #C90032 23px, transparent 23px),
linear-gradient(335deg, #C90032 23px, transparent 23px),
linear-gradient(155deg, #C90032 23px, transparent 23px),
linear-gradient(335deg, #C90032 10px, transparent 10px),
linear-gradient(155deg, #C90032 10px, transparent 10px),
linear-gradient(335deg, #C90032 10px, transparent 10px),
linear-gradient(155deg, #C90032 10px, transparent 10px);
}

11. Ну и конечно можно до бесконечности ипользовать линейный градиент в качестве фона:

.fon11 {
background-color: #026873;
background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
}