CODEWITHSUNDEEP
jqueryhtmlcss
user1320260
user1320260

Reputation:

Blur background of a div

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

Upvotes: 5

Views: 7601

Answers (3)

Snehal Chavan
Snehal Chavan

Reputation: 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;   
}

Upvotes: -1

Kevin Lynch
Kevin Lynch

Reputation: 24703

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();
    });
});

Upvotes: 1

Shomz
Shomz

Reputation: 37701

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).

Upvotes: 1

Related Questions