Halftone overlay effect for background images in CSS

style.css

.container {
	background: url('path/to/background.jpg');
	background-size: cover; 
	background-repeat: no-repeat;
	position: relative; /* use this if optional inner container is used */
}

.container:after {
	background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
        linear-gradient(-45deg, #666 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #666 75%), 
        linear-gradient(-45deg, transparent 75%, #666 75%);
	background-size: 2px 2px;
	background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
	padding-top: 62.5%; /* This percentage makes a 16:10 ratio */
	display: block;
	content: '';
}

/* Optional inner container for text etc */
.container-inner {
	width: 90%;
	margin: 0 auto;
	position: absolute;
	top: 10%;
	bottom: 0;
	right: 0;
	left: 0;
	text-align: center;
}