front image inherits the properties from backgrund image in css

Question

i've used the blur filter effect in a div's background image, but the filter automatically applies to the picture in the front too

.backg {
  width: 100%;
  height: 300px;
  background-image: url("https://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg");
  background-size: 100%, 100%;
  filter: blur(10px);
}

<body>
<div class="backg">
  <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg" height="200px" width="200px">
</div>
</body>

i want the filter only to be only applied in the background

score 0 · Answer 1 · answered Mar 03 '19 at 18:52

0

.backg {
  width: 100%;
  height: 300px;
}
.backg:after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 300px;
  background-image: url("https://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg");
  background-size: 100%, 100%;
  filter: blur(10px);
}
.backg img {
 position: relative;
 z-index: 1;
}

<body>
<div class="backg">
  <img src="https://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg" height="200px" width="200px">
</div>
</body>

answered Mar 03 '19 at 18:52

Amarjit Singh

1,152
7
12

Hi Rupak add the background in before or after of div, currently you are making the div property blur which makes everything blur it contains. hopw you find the solution :) – Amarjit Singh Mar 03 '19 at 18:54

score 0 · Accepted Answer · answered Mar 03 '19 at 19:09

I hope this code will be helpful for you

.backg {
  width: 100%;
  height: 300px;
  background-image: url("https://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg");
  background-size: 100%, 100%;
  filter: blur(10px);
  display: block;
  position: absolute;
}

.content img {
  position: absolute;
}

<div class="backg"></div>
<div class="content">
  <img  src="https://cdn.images.express.co.uk/img/dynamic/1/590x/dog-650299.jpg" height="200px" width="200px">
</div>

front image inherits the properties from backgrund image in css

2 Answers2