'How to make background of div blurred?

Ok, now I've been searching StackOverflow for similar issues, but none of them actually fit my case. So I have a background image that covers the entire web page, and in the center, I have a div which contains some other sub-divs (with a login form, some paragraphs, etc.) What I want is to blur only that portion of the background image that overlaps with the div. Image: here

So I only want the part of the image in the red rectangle to be blurred. If I just add a blur filter to the main div, it will just blur the content of it (the text and the form). Also, keep in mind that the background image is not the background of the div, but the background of the entire page.

htmlcss


Solution 1:[1]

background-color: rgba(0, 0, 0, 0.61);

backdrop-filter: blur(5px);

Some explanation: backdrop-filter is used for making only the background of the specified portion/aria of screen you can use it to div, images and some elements. background-color is optional, and is not always necessary, in case if you want to make the background blur darker. Supported for Firefox, Safari and Chrome. check here the documentation https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter

Solution 2:[2]

The duplicate mention by Arkej seems to fit your needs.( <div> blur of part of Backgroung image with css )

The trick is to use background-position:fixed; on html/body and the element to blur on top of it, so , both background-image lays on the same area of the window.

The duplicate uses an extra element, this can be a pseudo element if you do not wish to modify HTML structure.

Flex can also be used to center body.

div {
  border:solid ;
  padding:6vw ;
  position:relative;
}
div:before{
  content:'';
  position:absolute;
  z-index:-1;
  top:0;
  left:0;
  bottom:0;
  right:0;
  background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
  filter:blur(4px);
  background-size:100vw auto;
  /* makup ? */
  box-shadow:inset 0 0 0 50vw rgba(255,255,255,0.2)
}
/* makup to center content */
html {
  min-height:100%;
  display:flex;
  background:url(http://lorempixel.com/1600/800/nature/1) fixed center;
  background-size:100vw auto
}
body {
  margin:auto;
}
<div>blur my background</div>

http://codepen.io/gc-nomade/pen/MpvRGJ

Solution 3:[3]

Try this, It might work,

<div class="blur"></div>

<style>
.blur {
width:100%;
height:100%;
background-size:cover;
-webkit-filter: blur(4px);
-moz-filter: blur(4px);
-ms-filter: blur(4px);
-o-filter: blur(4px);
filter: blur(4px);
}
</style>

Solution 4:[4]

Use filter: blur('5px'); in the class

Solution 5:[5]

Here, this example will do the work. This is also compatible with Chrome, Opera, Edge, Firefox, and Safari.

.row {
  background: #f8f9fa;
  margin-top: 20px;
}

.col {
  border: solid 1px #6c757d;
  padding: 10px;
}

.section-blur {
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(10px);
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
<div class="container section-blur">
  <div class="row">
    <div class="col">
      Sulhadin Öney
    </div>
    <div class="col">
      Sulhadin Öney
    </div>
  </div>
  <div class="row">
    <div class="col">
      Sulhadin Öney
    </div>
    <div class="col">
      Sulhadin Öney
    </div>
    <div class="col">
      Sulhadin Öney
    </div>
  </div>  
</div>

Solution 6:[6]

You can use backdrop-filter: blur(2px);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Community
Solution 3 G.Ashok Kumar
Solution 4 Buddy
Solution 5 sulhadin
Solution 6 Aryan

Related Questions