CODEWITHSUNDEEP
htmlcss
user6875114
user6875114

Reputation:

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.

Upvotes: 21

Views: 70698

Answers (6)

Bmuzammil
Bmuzammil

Reputation: 31

I found this solution, I was searching for the same CSS solution.

CodePen: https://codepen.io/DesignersWeb/pen/MWqyqKq

  .blur {
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100%;
    overflow: hidden;
    filter: blur(13px);
    position: absolute;
    background-size: cover;
    background: url("https://images.unsplash.com/photo-1486723312829-f32b4a25211b?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=") no-repeat center center fixed;
  }

  .content {
    padding: 20px;
    font-size: 18px;
    position: relative;
  }
<div class="">
  <div class="blur"></div>
  <div class="content">
      <h3>What is Lorem Ipsum?</h3>
      <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
  </div>
</div>

Upvotes: 0

Dumitru
Dumitru

Reputation: 450

background-color: rgba(0, 0, 0, 0.61);
    
backdrop-filter: blur(5px);

backdrop-filter is a CSS property used to blur the background of a specified element or area on a webpage. It can be used on divs, images and other elements. It is supported in Chrome and Firefox 103 and higher. Optional background-color can be used to make the background darker. For more information, see the official documentation. https://developer.mozilla.org/en/docs/Web/CSS/backdrop-filter

For Safari:

-webkit-backdrop-filter: blur(5px);

Upvotes: 38

sulhadin
sulhadin

Reputation: 516

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">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
  </div>
  <div class="row">
    <div class="col">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
    <div class="col">
      Sül
    </div>
  </div>  
</div>

Upvotes: 2

Aryan
Aryan

Reputation: 1

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

Upvotes: -2

G-Cyrillus
G-Cyrillus

Reputation: 105873

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

Upvotes: 3

G.Ashok Kumar
G.Ashok Kumar

Reputation: 1633

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>

Upvotes: 1

Related Questions