I don't know the name of the effect?

Question

css

Very often I see the "grid image" effect, such as here mockflow.com/apps/bannerpro/. What is it called and how to use it?

Answer 1

All this is done with transparent png as a pattern ( background-image in css)
My grandma's recipe:
mockflow.com/images/bg-pixel-30.png - just paste this png.

Answer 2

Through a pseudo-element, such a background is superimposed on top of the image.
In this case, the overlay is done like this:

.bannerProHead>header:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('../../images/bg-pixel-30.png');
}

Answer 3

Pattern over the image.

Answer 4

If the grid is not applied dynamically, then you can immediately create the target image in a graphics editor by adding a layer with the grid. This way you can save unnecessary operations when compositing in the browser.