Blur a Background Image (with help from blur.js)

Recently, in a very small project of mine, I wanted to create a full-size image as the background and to blur it a little to create an abstract but interesting backing image. Initially, webkit filters were looked at, which are admittedly limited in terms of browser support, but also gave a nasty looking white edge to the images. So a JavaScript option was considered instead.

The solution? To use jQuery and the blur.js plugin along with a little CSS to create the effect.

View Demo

Step 1) Create a Background Element & Include jQuery#

The first step is to create an element which will sit over the body element, with a full page width and height – this will be styled in step 2. Also add the required scripts, which in this case is jQuery (from the Google CDN) and blur.js (download).

<div id="bg"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="js/blur.js"></script>

Step 2) Style the Background element#

The next step is to style our body and background element. The background image of our choosing is applied to the body element with our element overlaying that, with absolute positioning and notably the background-size property changed to ‘cover’. This means that our background image will cover the entire region of our page.

body {
    background-image: url(img/bg.jpg);
}

#bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: #FFF;
    background-size: cover !important;
}

Step 3) Call blur.js#

The third and final step is to call the blur.js function. This function uses our background element as the target and the body element as the source for the image. It also applies a 30 pixel radius of blur to the image and a light transparent overlay.

$(document).ready( function() {
    $('#bg').blurjs({
        source: 'body',
        radius: 30,
        overlay: 'rgba(0, 0, 0, .2)'
    });
});

View Demo

Important Note: This technique doesn’t work with local files and has to run through a server, likewise if the background is hosted on the Amazon S3 service you will need to enable cross-domain calls (CORS).

Conclusion#

So there we have it, a simple solution with an effective result. Have you ever used this technique (or a better one)?