Halftone overlay effect for background images in CSS

This trick isn’t specific to WordPress and can be use on any website, but I like it so here we are. You can add visual interest to your background images with this halftone style overlay. Or crosshatch. Whatever you want to call it. Anyway it looks nice and can be used to make a text overlay more legible against the image.

Use some HTML similar to this:

<div class="container"><div class="container-inner">Your text here</div></div>

Then place the code below in your stylesheet.