Blur background of a div

Question

I want to blur the background of a div. I can only find solutions that apply to images as background, not HTML elements. It is for mobile use so CSS3 is not a problem. I have put a JSfiddle together showing my dilema.

My desired result: When the dropdown appears, it blurs the content of all the elements directly behind it, not the entire page.

Here is the HTML for example purposes from the JSFiddle:

HTML

<a href="#" id="link">open/close</a>
<div id="slide">
    <p>Text Text Text Text Text Text Text Text </p>
     <p>Text Text Text Text Text Text Text Text </p>
     <p>Text Text Text Text Text Text Text Text </p>
     <p>Text Text Text Text Text Text Text Text </p>
</div>
<div id="page_content">
    <p>Page content, not images Page content, not images Page content, not images </p>
     <p>Page content, not images Page content, not images Page content, not images </p>
     <p>Page content, not images Page content, not images Page content, not images </p>
     <p>Page content, not images Page content, not images Page content, not images </p>
</div>

EDITED:13:00 18/06/2013

I tried to get the "accepted answer" to work but for some reason it doesn't work when extracted from the JSfiddle

Here's my code:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$( document ).ready(function() {


$('#link').click(function() {
  $('#slide').slideToggle('slow', function() {
  });
});

$('#main-view').click(function(){

html2canvas(document.body, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width: 300,
        height: 100
    });
    
    $('#cover').slideToggle('fast', function(){
        $('#partial-overlay').slideToggle();
    });
});
});
</script>

<style>
#link {
    z-index: 1000;
    position: absolute;
    top:0;
    left:0;
}  
#partial-overlay {
    padding-top: 20px;
    display:none;
    width: 100%;
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    z-index:99; 
  }
canvas{
    height: 100px;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-filter:blur(2px);
}
#cover{
    display:none;
    height:99px;
    width:100%;
    background:#fff;
    position:fixed;
    top:0;
    left:0;
}
#main-view {
 width:300px;   
}
</style>
</head>
<body>
<div id="main-view">
    <a href="#" id="link">open/clode</a>
  Page content, not images Page content, not images Page content, not images page_content Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, not images Page content, 
</div>
    <div id="cover"></div>
<div id="partial-overlay">
    <p>Some content here</p>
    <p>Some content here</p>
</div>
</body>
</html>

I've tried with and without the DOM ready wrapper

try this jq plugin http://blurjs.com/, iam not sure if u can achiev blur effect with css — Pavel, Jun 17 '13 at 12:04
http://css-plus.com/2012/03/gaussian-blur/ Check this article — z1m.in, Jun 17 '13 at 12:05
This isn't blurring the background div, but looks similar - http://jsfiddle.net/GhrUD/1/ — Reinstate Monica Cellio, Jun 17 '13 at 12:11
I have tried blur.js but this only works for images. Is implies it works for html elements but this is not the case, strickly images only. That is why It does not suit my needs. — , Jun 17 '13 at 13:13
Aravind30790 shows how to blur an element below, but that's only how to blur an actual element - not the things behind it. That's not possible with html & css. Opacity and a white background *is* the best you'll get. — Reinstate Monica Cellio, Jun 17 '13 at 13:22

score 1 · Answer 1 · answered Jun 17 '13 at 12:24

1

Altough it's not really a blur, but adding a white background with an alpha value will do the trick (background: rgba(255, 255, 255, 0.8)). Experiment with the alpha value for the best results.

See here and here (the second one has a grayish background on the content so you can see what happens).

answered Jun 17 '13 at 12:24

Shomz

37,421
4
57
85

Thanks for the suggestion, but i'd like purely a blurred background with no overlay as such. I thought I could try and create a blurred background png image for the div but this also did not work. – Jun 17 '13 at 13:15
You're welcome. The blurred background also won't work in case your content changes, right? I'm not sure this is possible with html and css, but I hope you'll find a way. – Shomz Jun 17 '13 at 13:40

score 1 · Accepted Answer · answered Jun 17 '13 at 17:52

1

I believe this is what you are looking for. I use the canvas element. I suspect this will become very popular with the new pending release of iOS7 that makes use of this effect.

fiddle http://jsfiddle.net/kevinPHPkevin/TfWs3/49/

$('#main-view').click(function(){
html2canvas(document.body, {
        onrendered: function (canvas) {
            document.body.appendChild(canvas);
        },
        width: 300,
        height: 100
    });

    $('#cover').slideToggle('fast', function(){
        $('#partial-overlay').slideToggle();
    });
});

answered Jun 17 '13 at 17:52

Kevin Lynch

24,427
3
36
37

even after closing i can see the blur , how to remove that – Aravind30790 Jun 18 '13 at 04:39
It works in JS fiddle but not once extracted from the fiddle. I know it's my error and not your code, i'm just struggling to find where i'm going wrong. I've edited my answer to show the code I've extracted from your fiddle – Jun 18 '13 at 11:48

score -1 · Answer 3 · edited Dec 29 '13 at 21:24

-1

Create a overlay for the image. under css code is for reference

.overlay {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #A5A5A5;
    display: block;
    height: 231px;
    opacity: 0.8;
    filter: alpha(opacity = 50);
    padding: 9px 0px 0 0px;
    position: absolute;
    top: 0;
    width: 298px;   
}

edited Dec 29 '13 at 21:24

Tristan Jahier

1,127
1
12
27

answered Jun 17 '13 at 12:25

Snehal Chavan

1

Blur background of a div

HTML

3 Answers3

Linked