Blur Image

HTML

<section id="clan-profile">
<div id="clan-image">

</div>
  <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>

CSS

#clan-profile {
  
  height: 300px;

}

#clan-image{
  position: absolute;
  width: 100vw;
  height: 50vh;
  top: -5px;
  left: -5px;
  z-index: -1;
  background-image: url(http://placekitten.com/500/200);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-filter: blur(5px);
  /* Safari 6.0 - 9.0 */
  filter: blur(5px);
}