how to do a background blur in css
/* Answer to "blur behind element css" */ /* This blurs everything behind the element it's applied to */ backdrop-filter: blur(10px);
background image filter
.module { position: relative; } .module::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(graphic-to-be-filtered.jpg); filter: grayscale(100%); } .module-inside { /* This will make it stack on top of the ::before */ position: relative; /* OR */ z-index: 1; }
Source: css-tricks.com
adding a filter to your background image
background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url(image.jpg);