So it’s kind of tricky but the best way to do it is have a div overplayed on top of the background and apply the same background image to it and then blur that div that is on top of the other div. Using cover with the same settings for both div backgrounds should line them up. If you want sharp edges, don’t add rounded corners to the blurred div, you’ll have to wrap that div in another div with rounded corners and set the overflow to hidden. You may have to mess with the size of the blur to get the effect. Then add a white overlay.
Alternatively, I’ve had easier success exporting an already blurred version of the image out of photoshop and applying the same settings minus the div wrapper.