CODEWITHSUNDEEP
javascripthtmlcsssvg
TheEnvironmentalist
TheEnvironmentalist

Reputation: 2852

How do you apply a blurry background using CSS/SVG/Canvas/whatever else works when background is repeated?

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

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

enter image description here

Upvotes: 1

Views: 3413

Answers (1)

Michael Mullany
Michael Mullany

Reputation: 31750

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.

Upvotes: 2

Related Questions