Is there a way to blur the background image without affecting the content above it? I'm having trouble achieving this as blurring the parent element also blurs the content. Any suggestions on how to fix this issue? I've tried a few steps but none of them seem to work.
Solution Snippet
#clan-profile {
background-image: url(http://placekitten.com/500/200);
height: 300px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
/* Safari 6.0 - 9.0 */
filter: blur(5px);
}<section id="clan-profile">
<div class="container">
<div class="row pt-4 pb-4">
<div class="col-12 col-md-6">
<div class="row pb-1">
<div class="col-12">
<h2>Lorem Ipsum</h2>
<h5>Lorem Ipsum</h5>
</div>
</div>
<div class="row pt-1 pb-1">
<div class="col-12">
<img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
<img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
<img src="https://via.placeholder.com/50x50" alt="" class="img-fluid rounded-circle">
</div>
</div>
<div class="row pt-1 pb-1">
<div class="col-12">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, nulla, sed. Sunt, quo reprehenderit cum ut nihil dolor saepe. Culpa at velit, possimus iste eum ipsum similique sapiente neque aliquam.
</div>
</div>
</div>
<div class="col-12 col-md-6 pt-3">
<img src="https://via.placeholder.com/500x200" alt="clan-img" class="img-fluid">
</div>
</div>
</div>
</section>