There are ways to do this in a cross-browser fashion, but they’re generally quite hacky and rely on multiple images and/or elements. Safari supports a backdrop-filter
property (prefixed with -webkit-
) – but that’s only on Safari, so no dice for Firefox, Chrome, Edge, etc.
If you want to be cross-browser, and don’t want to have to delve into multiple images/elements and lots of JS running on scroll (which will often result in “janky” behaviour and visuals), you really have two choices: blur the whole image, or, well don’t blur the whole image.
If you do blur the whole image (which I’d recommend to aid legibility), it’s often a good idea to do this in the image itself, rather than using CSS – blurred images compress down better than highly-detailed images in JPEG, and you can also use a smaller image and scale it up without compromising on the look.