Blur background-image only and not the text infront

Question

As the title says. How do I blur the background-image of my container without blurring the text in front of it?

.container a .body-container {
  background-image: url("https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/02/Landscapes-01-jeremy-flint.jpg");
  filter: blur(1px);
}

<div class="card">
  <div class="head">
    <div class="title">
      <span>Card Title</span>
    </div>
  </div>
  <div class="body-container">
    <div class="body">
      <div class="content">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
      </div>
    </div>
  </div>
</div>

I made the JSBin here, https://jsbin.com/gizoyomuyi/1/edit?html,css,output

Update: Apologies, I updated the JSBin link because the one I posted earlier was outdated.

Note: The left card is the changes I made based on @Irin's answer, and the right card is as is.

That dupe, and a couple more, could be found by simply typing your question title into Google verbatim btw. — 04FS, Jun 27 '19 at 07:15

Irin · Answer 1 · 2019-06-27T04:53:24.553

try out this

body,
html {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

* {
  box-sizing: border-box;
}

a,
a:hover {
  color: black;
  text-decoration: none;
}

.head {
  border: 1px solid gray;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  padding: 20px;
}

.bg-image {
  /* The image used */
  background-image: url("https://i2.wp.com/digital-photography-school.com/wp-content/uploads/2019/02/Landscapes-01-jeremy-flint.jpg");
  /* Add the blur effect */
  filter: blur(5px);
  -webkit-filter: blur(5px);
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


/* Position text in the middle of the page/image */

a {
  color: white;
  font-weight: bold;
  position: absolute;
  top: 74%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  width: 80%;
  padding: 20px;
  text-align: center;
}

<div class="head">
  <div class="title">
    <span>Card Title</span>
  </div>
</div>
<div class="bg-image"></div>
<div>
  <a href="#">
    <div class="card body-container">

      <div class="">
        <div class="body">
          <div class="content">
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
          </div>
        </div>
      </div>
    </div>
  </a>

</div>

I followed your suggested solution but unfortunately, it's not working. I updated the JSBin link which includes your solution. If you happen to visit the link again, the left card is your solution while the right card is as is. — Jahm, Jun 27 '19 at 03:25
you need to set your text position: absolute; let me fix your code please — Irin, Jun 27 '19 at 03:33
Sure, you can update the bin, and just paste the snapshot here. — Jahm, Jun 27 '19 at 03:49
you wc. please accept the answer as accepted answer :) @Jahm — Irin, Jun 27 '19 at 05:43

score 0 · Answer 2 · answered Jun 27 '19 at 04:36

To make background blur without affecting text, you will have to take two different div. one for the background image and another for the text.

You will have to use position: absolute for the div with content.

Please follow the code below using your image name :

<html>
<head>
<style>
.body-container {
    background-image: url(https://images.pexels.com/photos/257360/pexels-photo-257360.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
    filter: blur(5px);
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.body {
    position: absolute;
    top: 50%;
    color: #fff;
    margin: 0px auto;
    width: 50%;
    text-align: center;
    right: 0%;
    left: 0%;
    font-size:25px;
}
</style>
</head>
<body>
<div class="card">
  <div class="head">
    <div class="title">
      <span>Card Title</span>
    </div>
  </div>
  <div class="body-container">

    </div>
        <div class="body">
      <div class="content">
        <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
        </div>
      </div>
  </div>

</body>
</html>

Blur background-image only and not the text infront

2 Answers2