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.
backdrop-filter: blur(10px);
It will blur area behind the element.
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!
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
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.
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;
}
}
