CODEWITHSUNDEEP
htmlcssblur
Gabe Dunn
Gabe Dunn

Reputation: 456

Blur Behind Div CSS

I am working on a website, and I need to blue the background behind a div, and I am unable to find a way to do it using CSS.

I found an article that showed how to do it, but I was unable to accurately replicate it.

Here is the article: https://jordanhollinger.com/2014/01/29/css-gaussian-blur-behind-a-translucent-box/

Here is my page: http://biolinks.redxte.ch/blur

If anyone can let me know what I'm doing wrong that would be great, thanks.

Upvotes: 18

Views: 42871

Answers (4)

W.Leto
W.Leto

Reputation: 1243

backdrop-filter: blur(10px);

It will blur area behind the element.

Upvotes: 52

Eduardo La Hoz Miranda
Eduardo La Hoz Miranda

Reputation: 2056

Yet another implementation. Note that the downside is that you have to duplicate the text in order to get the same height in both places (can probably do this with JS, or something, to be little cleaner)

html: 

<div class="outer">
  <div class="inner">
    <h1>Blurred box</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
  </div>
  <div class="inner with-text">
    <h1>Blurred box</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur, omnis quam. Eos distinctio amet nisi ex ipsam ab, accusamus quod, natus nulla modi obcaecati labore nostrum cupiditate laboriosam. Doloremque, omnis!</p>
  </div>
</div>

scss:

@import "compass/css3";

$normal-img: "https://upload.wikimedia.org/wikipedia/commons/8/84/San_Stefano_Grand_Plaza%2C_Alexandria%2C_Egypt.jpg";

.outer{
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:url($normal-img);
  background-repeat:no-repeat;
  background-size: cover;
  background-attachment: fixed;
}
.inner {
  background-image:url($normal-img);
  background-repeat:no-repeat;
  @include background-size(cover);
  background-attachment: fixed;
  filter:blur(6px);
  width:500px;
  left:-webkit-calc( 50% - 250px );
  top:20%;
  position:absolute;
  @include box-sizing(border-box);
  color: transparent;
  &.with-text {
    color: white;
    opacity: .5;
    filter: none;
    background: grey;
  }
}

pen: https://codepen.io/anon/pen/BxgyNR?

Upvotes: 0

Rachel Gallen
Rachel Gallen

Reputation: 28593

add the blur filter to the #pp css (the img id used within your .name class) and remove it from the name-bg (which is affecting the whole background). That should work better for you. 10px might be a bit much. I previewed it (see image)

Hope this helps

Gabe Dunn 10 px blur

EDIT:

After a closer look at your code (and seeing your comment, which clarified the question), you already have margin set to 0 auto around the name container, and the name-bg class is already being sized by this (it is being altered by the addition of the top/right/bottom/left coordinates) I adjusted the top/right/left/bottom to 2 or -2 (see fiddle), which decreased the size of the background div. I also changed the positioning to relative, so that when resized, that it will still come up in the middle.

https://jsfiddle.net/RachGal/rhav95o1/ :fiddle

I think this is closer to what you are looking for.

Upvotes: 0

Chris Happy
Chris Happy

Reputation: 7305

You were so close!

Remove position: relative on .name-container and add it to .head

Update:

Remove .name-bg, (use display: none if neccessary), and change .name z-index to 1 or greater. Then add this code.

.name:after {
  content: "";
  display: block;
  position: absolute;
  background-position: center -373px;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  filter: blur(10px);
  border-radius: 8px;
  z-index: -1;
}

.head, .name:after {
  background-size: 1500px auto; /* Really, this */
  background-position: center; /* and this is the only code .head needs  */
  background: url('http://il9.picdn.net/shutterstock/videos/3403961/thumb/1.jpg');
}

Note: As the site used, you have to set an absolute background-size unfortunately. Also, as @media code gets used, you gotta tinker with the code a little.

Hope it helps!

Upvotes: 2

Related Questions