CODEWITHSUNDEEP
htmlcss
codiplex
codiplex

Reputation: 159

CSS: How to blur background image within the div?

I want to blur the background image that is only at the back of the div but if i try to add filter:blur(10px); in the css, only the div will blur and not the background. I want it to be something like this:

enter image description here

Here is my code: 

body {
  background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
}
.contain {
  width: 100%;
  height: 100%;
}
.box {
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 10px;
  width: 200px;
  background-color: #fff;
  opacity: 0.7;
}
<div class="contain" align="right">
  <div class="box">
    <h1>Header</h1>

    <p>Paragraph. Something to write...</p>
  </div>
</div>

Upvotes: 2

Views: 32849

Answers (3)

bristweb
bristweb

Reputation: 1215

I believe the easier solution would be to add backdrop-filter, like:

backdrop-filter: blur(20px)

for example:

.main{
 width:100vw;
 height:100vh;
 background:url("https://source.unsplash.com/buF62ewDLcQ");
 background-size: cover;
 display: flex;
 justify-content: center;
 align-items: center;
}

.box{
padding:10vh 10vw;
backdrop-filter:blur(20px) brightness(110%);
}
<div class="main">
<div class="box">My Content here</div>
</div>

you can read a good article about it at: https://css-tricks.com/almanac/properties/b/backdrop-filter/

or see more about the spec here: https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

Upvotes: 1

Alfred Huang
Alfred Huang

Reputation: 18235

Finally I worked out my solution:

But this solution must use javascript to get the position to feed back.

  1. We made a internal background layer .bg embed in the .box container.
  2. Resize the .bg as big as the body, so the background size is same.
  3. Set a negative marginTop and marginLeft to the .bg layer, according to the .box position. so the .bg image goes coincide with the body.
  4. Set a negative marginBottom to .bg, so the initial content in the box is placed back right.
  5. Remember to set overflow: hidden on .box， and then set the filter: blur(??px) on the .bg.

To keep the effect, you need to recall the style setting statement every time you moves the .box.

See demo also: http://jsfiddle.net/52mk6816/

$(function() {
  function render() {
    $('.bg').removeAttr('style').css({
      width: $('body').width(),
      height: $('body').height(),
      marginLeft: -$('.box').offset().left - 11,
      marginTop: -$('.box').offset().top - 11,
      marginBottom: -$('body').height() + $('.box').offset().top + 11,
    });
  }
  render();
  // When the window resizes, or the `.box` moves/resizes, recall the `render` function.
  $(window).resize(render);
});
body {
  background-image: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0;
  padding: 0;
}
.contain {
  padding: 10px;
}
.box {
  border: 1px solid #fff;
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  width: 200px;
  overflow: hidden;
}
.bg {
  position: relative;
  background: url(http://img0.mxstatic.com/wallpapers/6cba18f8e9c95b677bcc999c1e73e496_large.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
  -ms-filter: blur(3px);
  filter: blur(3px);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="contain" align="right">
  <div class="box">
    <div class="bg"></div>
    <h1>Header</h1>
    <p>Paragraph. Something to write...</p>
  </div>
</div>

Upvotes: 3

SG_Rowin
SG_Rowin

Reputation: 622

In your satuastion, you dont actually add the blur effect to your body backgroud, you need to add it to your .box.

To get the effect you are looking for, make a png file with white background and a 50% or 60% opacity to get the transparent effect. Use that PNG as your .box background and apply blur to the box:

.box{

border: 1px solid #fff;
border-radius: 10px;
padding: 10px;
width: 200px;
height:200px;
background-image:url('back.png');
position: relative;
z-index: 1
display: block;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}

back.png is file you will be creating as the .box background.

You can also apply CSS opacity to get more transparency

Upvotes: 0

Related Questions