1

I'm trying to figure out how to add a transparent content element with a blurred background in HTML, CSS, JS, and whatever else necessary. The problem comes with compatibility, and with the fact that I'm using a repeated background.

You see all kinds of ways of getting the effect below, where the foreground is blurred over a not-repeated image background. You can use a copy of the image with the blur photoshopped in. You can also do it in newer browsers using CSS Filters or SVG. The issue is, the only way I can find of getting this effect with a repeated background uses CSS features with compatibility issues, like CSS Filters or CSS Regions, which really aren't compatible with anything. SVG, depending on how you use it, can be buggy or reasonably compatible.

Blurred foreground layout

I'm trying to get the effect below, with a repeated background behind the same transparent, blurred content element. How can I do this, while

  • Not needing to have blurred versions of the background image (there are quite a few of them)

  • Being able to repeat the background

  • Expecting compatibility with just about all modern browsers, including IE back to at least IE8

  • Not needing to line up the content element with the repeated background (thought of that hack already, but it defeats the purpose and versatility of the repeated background)

I can't help thinking there's something I missed. Thanks ahead of time.

enter image description here

saintedlama
  • 6,838
  • 1
  • 28
  • 46
TheEnvironmentalist
  • 2,694
  • 2
  • 19
  • 46

1 Answers1

2

This is not possible with a constraint that it works back to IE8 unless you are willing to write a whole load of javascript to synchronize the size and position of a separate blurred overlay element with the background content - which you've already said you're not willing to do.

This is possible using Canvas as long as you are willing to do the whole thing (including background) in Canvas as far back as IE9 using custom Canvas code. It's just pixels afterall.

This is possible using SVG or Canvas as long as your background is also in Canvas/SVG as far back as IE10 using custom Canvas code or somewhat contorted SVG filters.

This is possible using just CSS (background-blend-mode) in some edge browsers.

Michael Mullany
  • 30,283
  • 6
  • 81
  • 105
  • Option 1 is definitely not going to happen, not because I'm not willing to put in the time, but because it's simply not practical (though I'd be happy to hear arguments to the contrary). Option 2 is pretty good as far as compatibility goes, and is relatively simple as well (though coding the Gaussian blur algorithm into Canvas might not be). Option 3 loses compatibility over option 2, and I'm not sure how efficiently a vector graphics system would deal with rasterized images. Option 4 is a great option, but a little ahead of its time (creds to Chrome and Safari). Overall, great choices. – TheEnvironmentalist Aug 14 '14 at 04:46