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

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="//"></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() {
        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).


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

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

      3. Hi Edd,

        I tried to add the following:

        Header add Access-Control-Allow-Origin “*”

        to .htaccess to allow access cross-origin resource sharing but I still get the error below:

        1.) Cannot access local image
        2.) Cannot access image

        Any idea to resolve this one?

        Thanks a lot,


  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.


  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.

  6. Hi, I use this code on “body” when my lightbox is open. After I close my ligthbox my body is still blur. How I can remove the blur. I try radius : 0, but doesn’t work. He exist a reset?

        source: 'body',
        radius: 0,
        overlay: 'rgba(0, 0, 0, .2)',
        cache: false
    1. Hi Mel, the way I usually do it is to have a full sized element show with the lightbox, but behind it, then hide it again when you close the lightbox – and this can be blured. This is an example (without the blur)

      Alternatively, you can re-run blurjs with radius 0 (and for me this reset it). Something like $('body').blurjs({radius:0});

Leave a Reply

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