How to blur background image of div, without blurring the remaining site or the content of the div

Question

I\'m trying to figure out how to blur the background image of a div. The goal is to only blur the background image of the div and not the background of the page itself or th

Answer 1

I have created a example using div, this includes a parent div,image and text. Now if I don't apply any position to elements present inside then they will align one after another, but to make image as background of div I have set it's position as absolute and using filter you can apply blur to the image and then using z-index align them i.e text and image. Hope this helps.

The filter property provides graphical effects like blurring, sharpening, or color shifting an element. Filters are commonly used to adjust the rendering of images, backgrounds, and borders.

div{
  width:200px;
  height:200px;
  overflow:hidden;
  position:relative;
}
div > img{
  width:auto;
  height:100%;
  z-index:1;
  top:0;
  left:0;
  position:absolute;
  filter:blur(10px);
}
div > p{
  text-align:center;
  top:60px;
  z-index:9;
  position:relative;
}

Demo text.Demo text.Demo text.Demo text.Demo text.