How can I blur the background-image of an parent element without effecting the child elements?

Answer 1

Simply add some gradient over it

https://code.sololearn.com/WNqaKKh7j66I/?ref=app

Answer 2

Change the z-index of the element that you don't wanna blur to a higher value than the parent.

If you are using some CSS library/framework nor you don't know the z-index and don't wanna find it by using the dev tools, so just set it to something like 2000 :)