How to make a picture work as a background with a blur filter

Question

I wanna use an image on my site as a brackground with a blur filter.

I tried using this in a css file:

.bg-image{
    background-image: url("../store/groupLK.jpg");
    filter: blur(8px);
    -webkit-filter: blur(8px);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

and in the html file:

<head>
<link rel="stylesheet" href="style/style.css" type="text/css" media="screen" />
</head>
<body>
<div class="bg-image">
/* the rest of the code including some other images */
</div>
</body>

And it seems to work but it blurs all of the images that I use as well instead of "groupLK.jpg" only. I also tried using the class bg-image before/after the other pictures but it only appears in that position and not in the rest of the site. Thank you in advance.

Did you have any other element having class name as `bg-image` ? — vaku, May 18 '19 at 13:46

score 0 · Accepted Answer · answered May 18 '19 at 14:01

This happens because blur filter is applied to the parent and therefor also effects all its children.

You could wrap your image and the text (or other images) in a container:

.bg-image{
  height: 200px;
  width: 200px;
  background-image: url("https://dummyimage.com/200x200");
  filter: blur(2px);
  position: absolute;
  top: 0;
  left: 0;
}

.text{
  position: absolute;
  top: 0;
  left: 0;
}

<div class="container">
  <div class="bg-image">
  </div>
  <div class="text">
    Hallo
  </div>
</div>

How to make a picture work as a background with a blur filter

1 Answers1