Наложение background при помощи css

#css

Как наложить подобную сетку на background используя css? Причем, не использовать
изображение самой сетки поверх основного фона, а сделать её в виде кода.

До наложения:



После наложения:



Чтобы было более понятно, нужно наложить вот такую сетку:


    

Ответы

Ответ 1

В css свойство background-image поддерживает перечисление, просто задайте несколько
бэкграундов через запятую.

Так же css поддерживает синтаксис при помощи которого можно "заинлайннить" svg в css:



body {
  background-image: 
    url("data:image/svg+xml;utf8,")
    ,url(https://i.stack.imgur.com/ZO8xS.jpg);

}
 




ну и естественно то же самое можно провернуть с .png


Ответ 2

.overlay {
    position: relative;
    z-index: 0;
.overlay:before {
        position: absolute;
        content: " ";
        background-image: url('//здесь путь к вашей сетке'),
        //если нужно - сделайте background-repeat: repeat-x
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: block;
        z-index: -1;
    }


HTML