Unfortunately it is not possible to create a real blur overlay with CSS for all browsers at the moment. Only webkit
has the backdrop-filter. But all other browsers mostly
support a blur filter. This will not really work like a overlay, more like a filter that will be propagated
bottom-up. In other words, the filter works only for a hole element or not. It's impossible to have something like a
div overlay element that blurs only a part of an image like the backdrop-filter.
You will start thinking about image sprites, if you see that your website has too many requests just because of some
background images. An image sprite can combine many single requests from a browser to the server into one request.
We just have to combine our background images into one single image and use the CSS property
background-position. It's just getting complicated if you have a transition on the background.