Паттерны
Вы можете использовать множество SVG паттернов для стилизации фоновых изображений. Паттерны рекомендуется использовать совместно с маской.
Примеры использования
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p1
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p2
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p3
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p4
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p5
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p6
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p7
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p8
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p9
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p10
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p11
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p12
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p13
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p14
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p15
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p16
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p17
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p18
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p19
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-p20
<img src="ссылка на изображение" class="img-fluid">
<div class="mask bg-p20"></div>
<div class="content align-center"><p class="c-white t-3">.bg-p20</p></div>
Наложение на цвет
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-green + .o-5 + .bg-p16
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-red + .o-3 + .bg-p6
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-purple + .o-6 + .bg-p19
![](https://c2.staticflickr.com/8/7402/9458635698_fce53e400c_c.jpg)
.bg-black + .o-4 + .bg-p20
<img src="ссылка на изображение" class="img-fluid">
<div class="mask bg-black o-4"></div>
<div class="mask bg-p20"></div>
<div class="content align-center"><p class="c-white t-2">.bg-black + .o-4 + .bg-p20</p></div>