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

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

   18 Comments    http://bit.ly/13kMtS2 Blur the Background.

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.

Check out the 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)'
    });
});

Conclusion

Check out the 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).

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

18 responses to “Blur a Background Image (with help from blur.js)

  1. I am a bit confused about your “Important Note”. Here it says, that the technique won’t work with local files. However with local files it does work quite well. But when using a flickr hosted image I get the following error message:
    1.) Cannot access local image
    2.) Cannot access image

    Do you know anything about this issue?

    1. By local files I meant the url starts with file:// (not http) – it will work fine on a local server or hosted server. (Is this the same for you?)

      The blur.js script requires the use of cross-origin resource sharing (which by default is disabled) – and that’s why it doesn’t work linking to flickr. Is it not an option to download it and host it yourself?

      (Thanks for the comment by the way)

      1. An alternative to creating a server is simply converting the image to a data URI. Obviously not recommended, but if you’re in a pinch, URI’s are a great alternative.

      2. I have three premium WordPress themes that use your script. I’ve been having an issue with customers that use a CDN to manage their images, etc. So the “Cannot Access Local Image” comes up a lot (and makes it unusable for them).

        What’s the solution for getting this to work properly when loading images from a CDN? Is there any way around it?

        And thanks so much for a great script! It’s been really awesome barring this one issue.

  2. Thank you so much man!
    this blur.js save my project.. I was working with foundation and my reveal look really bad (slow animation) over the blur given by -webkit-filters with css, also the edges, you know. And with this everything works perfect and load just fine c: thank you again.

  3. I am sorry for replying late.
    Yes downloading is an option for sure ;-) Using flickr hosted images would just have made things a tiny little bit easier.

    But it is no problem at all :-)

    Thanks again for this solution! Looks nice at my homepage.

  4. hi there,
    sir could you make out a sample with two different background and container in one.
    i am having problem with it.

    my first blurjs container background is always remove hence the second one still there.

    thanks..

  5. Hi, looking good. I do encounter a flaw; If you scale the viewport down, so you have to scroll the page, the blur stops, it doesn’t continue after the scroll.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>