Background Image Blur

Background Image Blur

photo found on Stocksnap

Earlier this year, when I was building the 8th iteration of Senlin Online, I followed the current trend like a tame sheep by using a big header image for the homepage.

I found a nice image on Unsplash and with the help of Unsplash.it I blurred the image. I believe I added another step by doing something with a color overlay in Photoshop, but for the purpose of this article, let’s leave that out of the equation…

Today I found via Codrop’s Collective #176 a way to do it easier next time I want to add a background image blur and as a bonus I won’t be limited to photos from Unsplash.

Tip: have a look at StockSnap.io

The Image Blur Plugin is a superlight script put together by Maksim Surguy from Seattle.

You can install the script via bower and it is also possible to download it and manually add it to your theme.

via bower:
bower install background-blur

manual (add to functions.php or functionality plugin):

The next step is to decide on a container id for the background image. If you are using the header of your site, the ID is very likely to be called masthead, but it can be anything really.

To create the blurred image in that container, we suggest to add the script to your main .js file as that makes it easier to tweak (and to find) later on:

Well, that’s it for the basics, you can use the other samples and demos on the site to go wild!

5 Comments

  1. I often use CSS to blur images (with filter property), it’s much faster and easier to preview with Google Dev Tools. However, the most disadvantage of CSS is browser support.

  2. Hi Anh Tran, thanks for stopping by.
    Using the filter property indeed is also a good method (for modern browsers).

  3. Excellent tips, Piet! Thanks for sharing the code snippets! Just one question, can I use these snippets in my Genesis themes as well?

    1. Hi Susanta, thanks for your comment. I don’t work with Genesis, but I think it is safe to assume that it also uses the wp_enqueue_scripts function to properly enqueue scripts. As the themes will also have a functions.php file, I would say that you indeed can use this technique in your Genesis themes :)

      You can always try it and let us know here whether it worked out for you or what you found users need to pay attention to.

Comments are closed.