When you're building out a website with full-width background images, you've probably run into an issue with resolution and size. Screens are getting huge, and images keep getting larger.
But how large is too large for images?
We should all care about bandwidth. At some point, you have to put your foot down and say, "You're big enough."
The problem I've been running into is that raster images start showing artifacts or begin looking blurry once they've extended past their natural width.
Take the pen below for example:
Extend the pen's width past 600px, and you'll start to notice the image's quality decaying. While it only affects users with viewports wider than the image's natural width, you don't necessarily want to degrade the experience for those users with larger monitors.
Auto Background Blur to the rescue
I've started implementing what I call Auto Background Blur for large-width background images.
If your over-extended background image is going to be artifacted/blurry, why not make all of it blurry?
How do we blur the image? I added the following CSS to the
And since adding blur affects the edges of the image, we add another rule to scale the background image in, clipping off the weird blurred edges:
Slap on a nice transition, and you get a pretty blur/unblur effect as your resize your window:
transition: all 0.2s ease-in-out;
As with everything, there are caveats. Support for
blur isn't there with Internet Explorer, and you have to use the
url() version with the current Firefox.
But I think this is a pretty handy solution with low overhead. What are your thoughts?
Update 2: I've updated the pens to have 600px wide images and apply the blur effect at that breakpoint to better demonstrate it inside this blog layout.
Update 3: @mullany offers an alternative to scaling the image, getting rid of the artifacts that appear on the edge when you use the
blur filter. It appears to use an SVG Gaussian blur – pretty neat: http://codepen.io/mullany/pen/MYeYGL.