I see 2 easy options:
gradient option:
html {
min-height:100%;
background:linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)), url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
}
shadow option:
html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2);
background-size:cover;
box-shadow:inset 0 0 0 2000px rgba(255, 0, 150, 0.3);
}
an old codepen of mine with few examples
a third option
The
background-blend-modeCSS property sets how an element's background images should blend with each other and with the element's background color.
html {
min-height:100%;
background:url(http://lorempixel.com/800/600/nature/2) rgba(255, 0, 150, 0.3);
background-size:cover;
background-blend-mode: multiply;
}