Pixel Grid (пиксельная сетка) применяется для придания текстуры фону или изображению. Служит для затемнения или осветления основы.
К необходимому объекту, например <div> с классом .photo в CSS делаем такие свойства
.w-grid {
float: left;
width: 100%;
position: relative;
}
.w-grid::after {
background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern-wt.png);
width: 100%;
height: 100%;
position: absolute;
left:0;
content: "";
}
.d-grid {
float: left;
width: 100%;
position: relative;
}
.d-grid::after {
background-image: url(https://opttour.ru/wp-content/themes/tester/images/bg-pattern.png);
width: 100%;
height: 100%;
position: absolute;
left:0;
content: "";
}
!и обязательно чтобы объект внутри <div> был объект (например img) со свойством float:left;
Примеры
Первое изображение без пиксельной сетки, во втором примере добавлен класс w-grid, в третьем примере добавлен класс d-grid
Во 2-м и 3-м примерах ::after прописан не в .photo, а в классах w-grid и d-grid. ::after для изображения (img) задать нельзя, т.к. тэг должен быть открываемый/закрываемый div /div
