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
You can install the script via bower and it is also possible to download it and manually add it to your theme.
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!