How do i make the background image blurry without affecting the top content?

Question

I'm trying to make the background image blurry. But keep the content above it visible. I think there's a issue because of making the parent element blurry. How can fix this? Tried couple of steps but it didn't really work.

SO 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>

Cristian C. · Accepted Answer · 2019-03-29T20:36:54.927

2

If possible I would suggest to split up the parent element clan-profile and the background image.

You could do something like:

<section id="clan-profile">
  <div class="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>
...

Then you could do the following css:

.clan-image {
  background-image: url("...");

  /* Add the blur effect */
  filter: blur(5px);
  -webkit-filter: blur(5px);
}

Then you have a decision to make. You can either make the image absolutely positioned, or you can make the content absolutely positioned. Another solution is to use css-grid, and position the elements on top of each other, because grid allows for this.

Edit: Added Example: https://jsfiddle.net/dw2Lq0zj/

edited Mar 29 '19 at 20:36

answered Mar 29 '19 at 20:17

Cristian C.

808
11
34

Making the .clan-image position absolute makes it go invisible. Is there a specific way i should do this? – Kasun Wijesekara Mar 29 '19 at 20:32
Found an answer on this thread. https://stackoverflow.com/questions/20039765/how-to-apply-a-css-3-blur-filter-to-a-background-image Similar to yours. Thanks! – Kasun Wijesekara Mar 29 '19 at 20:36
1

I'm glad you found your answer. I added an example using jsfiddle to illustrate more in depth what I meant. Keep in mind that you will need to set a width and height to your absolute image. Also don't forget to mark an accepted answer, whether it be this one or another one. – Cristian C. Mar 29 '19 at 20:37
Thanks for the help :) – Kasun Wijesekara Mar 29 '19 at 20:40

How do i make the background image blurry without affecting the top content?

1 Answers1