CSS blur on background image but not on content

Question

I did this example   I m trying to blur the background image  but the main content is blurred too  the  lt span gt    How can I blur the background without blurring the content

User · Answer

backdrop-filter  Unfortunately Mozilla has really dropped the ball and taken it s time with the feature  I m personally hoping it makes it in to the next Firefox ESR as that is what the next major version of Waterfox will use   MDN  Mozilla Developer Network  article  https   developer mozilla org en-US docs Web CSS backdrop-filter  Mozilla implementation  https   bugzilla mozilla org show bug cgi id 1178765  From the MDN documentation page      URL to SVG filter    backdrop-filter  url commonfilters svg filter        lt filter-function gt  values    backdrop-filter  blur 2px   backdrop-filter  brightness 60    backdrop-filter  contrast 40    backdrop-filter  drop-shadow 4px 4px 10px blue   backdrop-filter  grayscale 30    backdrop-filter  hue-rotate 120deg   backdrop-filter  invert 70    backdrop-filter  opacity 20    backdrop-filter  sepia 90    backdrop-filter  saturate 80        Multiple filters    backdrop-filter  url filters svg filter  blur 4px  saturate 150

User · Answer

Add another div or img to your main div and blur that instead  jsfiddle   blur       background url  http   i0 kym-cdn com photos images original 000 051 726 17-i-lol jpg 1318992465   no-repeat center      background-size cover      -webkit-filter  blur 13px       -moz-filter  blur 13px       -o-filter  blur 13px       -ms-filter  blur 13px       filter  blur 13px       position absolute      width 100       height 100

User · Answer

jsfiddle   blur-bgimage       overflow  hidden      margin  0      text-align  left     blur-bgimage before       content          position  absolute      width   100       height  100       background  inherit      z-index  -1       filter          blur 10px       -moz-filter     blur 10px       -webkit-filter  blur 10px       -o-filter       blur 10px        transition          all 2s linear      -moz-transition     all 2s linear      -webkit-transition  all 2s linear      -o-transition       all 2s linear      You can blur the body background image by using the body s  before pseudo class to inherit the image and then blurring it  Wrap all that into a class and use javascript to add and remove the class to blur and unblur

User · Answer

jsfiddle    lt div gt        lt img class  class  src  http   i0 kym-cdn com photos images original 000 051 726 17-i-lol jpg 1318992465  gt       lt  img gt       lt span gt          Hello World       lt  span gt   lt  div gt    What about this  No absolute positioning on div  but instead on img and span

User · Answer

You could overlay one element above the blurred element like so  DEMO  div       position  absolute      left 0      top  0    p       position  absolute      left 0      top  0

[css] CSS blur on background image but not on content

`backdrop-filter`

Examples related to css

Examples related to background-image

Examples related to blur