How to apply a CSS filter to a background image

Question

I have a JPEG file that I m using as a background image for a search page  and I m using CSS to set it because I m working within Backbone js contexts   background-image  url  whatever jpg      I want to apply a CSS 3 blur filter only to the background  but I m not sure how to style just that one element  If I try   -webkit-filter  blur 5px   -moz-filter  blur 5px   -o-filter  blur 5px   -ms-filter  blur 5px   filter  blur 5px     just underneath background-image in my CSS  it styles the whole page  rather than just the background  Is there a way to select just the image and apply the filter to that  Alternatively  is there a way to just turn the blur off for every other element on the page

User · Answer

pen

Abolishing the need for an extra element, along with making the content fit within the document flow rather than being fixed/absolute like other solutions.

Achieved using

_x000D_

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  left: 0;
  right: 0;
  z-index: -1;

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  background-size:cover;
  width: 100%;
  height: 100%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

_x000D_

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

_x000D_

EDIT If you are interested in removing the white borders at the edges, use a width and height of 110% and a left and top of -5%. This will enlarge your backgrounds a tad - but there should be no solid colour bleeding in from the edges. Thanks Chad Fawcett for the suggestion.

_x000D_

.content {
  /* this is needed or the background will be offset by a few pixels at the top */
  overflow: auto;
  position: relative;
}

.content::before {
  content: "";
  position: fixed;
  top: -5%;
  left: -5%;
  right: -5%;
  z-index: -1;

  display: block;
  background-image: url('https://i.imgur.com/lL6tQfy.png');
  background-size:cover;
  width: 110%;
  height: 110%;

  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}

_x000D_

<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

_x000D_

User · Answer

In the  content tab in CSS change it to position absolute  Otherwise  the page rendered won t be scrollable

User · Answer

x000D   x000D  div   x000D      background  inherit  x000D      width  250px  x000D      height  350px  x000D      position  absolute  x000D      overflow  hidden      Adding overflow hidden    x000D    x000D   x000D  div before   x000D      content          x000D      width  300px  x000D      height  400px  x000D      background  inherit  x000D      position  absolute  x000D      left  -25px      Giving minus -25px left position    x000D      right  0  x000D      top  -25px       Giving minus -25px top position    x000D      bottom  0  x000D      box-shadow  inset 0 0 0 200px rgba 255  255  255  0 3   x000D      filter  blur 10px   x000D    x000D   x000D   x000D

User · Answer

Check out this pen  You will have to use two different containers  one for the background image and the other for your content  In the example  I have created two containers   background-image and  content  Both of them are placed with position  fixed and left  0  right  0   The difference in displaying them comes from the z-index values which have been set differently for the elements   x000D   x000D   background-image     position  fixed    left  0    right  0    z-index  1    display  block    background-image  url  https   i imgur com lL6tQfy png      width  1200px    height  800px    -webkit-filter  blur 5px     -moz-filter  blur 5px     -o-filter  blur 5px     -ms-filter  blur 5px     filter  blur 5px       content     position  fixed    left  0    right  0    z-index  9999    margin-left  20px    margin-right  20px    x000D   lt div class  background-image  gt  lt  div gt   lt div class  content  gt     lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis aliquam erat in ante malesuada  facilisis semper nulla semper  Phasellus sapien neque  faucibus in malesuada quis  lacinia et libero  Sed sed turpis tellus  Etiam ac aliquam tortor  eleifend     rhoncus metus  Ut turpis massa  sollicitudin sit amet molestie a  posuere sit amet nisl  Mauris tincidunt cursus posuere  Nam commodo libero quis lacus sodales  nec feugiat ante posuere  Donec pulvinar auctor commodo  Donec egestas diam ut mi adipiscing      quis lacinia mauris condimentum  Quisque quis odio venenatis  venenatis nisi a  vehicula ipsum  Etiam at nisl eu felis vulputate porta  lt  p gt     lt p gt Fusce ut placerat eros  Aliquam consequat in augue sed convallis  Donec orci urna  tincidunt vel dui at  elementum semper dolor  Donec tincidunt risus sed magna dictum  quis luctus metus volutpat  Donec accumsan et nunc vulputate accumsan  Vestibulum     tempor  erat in mattis fringilla  elit urna ornare nunc  vel pretium elit sem quis orci  Vivamus condimentum dictum tempor  Nam at est ante  Sed lobortis et lorem in sagittis  In suscipit in est et vehicula  lt  p gt   lt  div gt  x000D   x000D   x000D   Apologies for the Lorem Ipsum text  Update Thanks to Matthew Wilcoxson for a better implementation using  content  before https   codepen io akademy pen FlkzB

User · Answer

The following is a simple solution for modern browsers in pure CSS with a  before  pseudo element  like the solution from Matthew Wilcoxson   To avoid the need of accessing the pseudo element for changing the image and other attributes in JavaScript  simply use inherit as the value and access them via the parent element  here body    body  before       content         Important        z-index  -1     Important        position  inherit      left  inherit      top  inherit      width  inherit      height  inherit      background-image  inherit      background-size  cover      filter  blur 8px      body     background-image  url  xyz jpg      background-size  0 0      Image should not be drawn here      width  100     height  100     position  fixed     Or absolute for scrollable backgrounds

User · Answer

This answer is for a Material Design horizontal card layout with dynamic height and an image   To prevent distortion of the image due to the dynamic height of the card  you could use a background placeholder image with blur to adjust for changes in height    nbsp   Explanation   The card is contained in a  lt div gt  with class wrapper  which is a flexbox  The card is made up of two elements  an image which is also a link  and content  The link  lt a gt   class link  is positioned relative  The link consists of two sub-elements  a placeholder  lt div gt  class blur and an  lt img gt  class pic which is the clear image  Both are positioned absolute and have width  100   but class pic has a higher stack order  i e   z-index  2  which places it above the placeholder  The background image for the blurred placeholder is set via inline style in the HTML     nbsp   Code   x000D   x000D   wrapper   x000D    display  flex  x000D    width  100   x000D    border  1px solid rgba 0  0  0  0 16   x000D    box-shadow  0 1px 1px rgba 0  0  0  0 16   0 1px 1px rgba 0  0  0  0 23   x000D    background-color   fff  x000D    margin  1rem auto  x000D    height  auto  x000D    x000D   x000D   wrapper hover   x000D    box-shadow  0 3px 6px rgba 0  0  0  0 16   0 3px 6px rgba 0  0  0  0 23   x000D    x000D   x000D   link   x000D    display  block  x000D    width  200px  x000D    height  auto  x000D    overflow  hidden  x000D    position  relative  x000D    border-right  2px solid  ddd  x000D    x000D   x000D   blur   x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D    margin  auto  x000D    width  100   x000D    height  100   x000D    filter  blur 5px   x000D    -webkit-filter  blur 5px   x000D    -moz-filter  blur 5px   x000D    -o-filter  blur 5px   x000D    -ms-filter  blur 5px   x000D    x000D   x000D   pic   x000D    width  calc 100  - 20px   x000D    max-width  100   x000D    height  auto  x000D    margin  auto  x000D    position  absolute  x000D    top  0  x000D    left  0  x000D    right  0  x000D    bottom  0  x000D    z-index  2  x000D    x000D   x000D   pic hover   x000D    transition  all 0 2s ease-out  x000D    transform  scale 1 1   x000D    text-decoration  none  x000D    border  none  x000D    x000D   x000D   content   x000D    display  flex  x000D    flex-direction  column  x000D    width  100   x000D    max-width  100   x000D    padding  20px  x000D    overflow-x  hidden  x000D    x000D   x000D   text   x000D    margin  0  x000D    x000D   lt div class  wrapper  gt  x000D     lt a href     class  link  gt  x000D       lt div class  blur  style  background  url  http   www planwallpaper com static assets img header jpg   50  50    cover   gt  lt  div gt  x000D       lt img src  http   www planwallpaper com static assets img header jpg  alt  Title  class  pic    gt  x000D     lt  a gt  x000D   x000D     lt div class  content  gt  x000D       lt p class  text  gt Agendum dicendo memores du gi ad  Perciperem occasionem ei ac im ac designabam  Ista rom sibi vul apud tam  Notaverim to extendere expendere concilium ab  Aliae cogor tales fas modus parum sap nullo  Voluntate ingressus infirmari ex mentemque ac manifeste x000D        eo  Ac gnum ei utor sive se  Nec curant contra seriem amisit res gaudet adsunt   lt  p gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Now this become even simpler and more flexible by using CSS GRID You just have to overlap the blured background imgbg  with the text h2     lt div class  container  gt    lt div class  imgbg  gt  lt  div gt    lt h2 gt    Lorem ipsum dolor sit amet consectetur  adipisicing elit  Facilis enim   aut rerum mollitia quas voluptas delectus facere magni cum unde      lt  h2 gt   lt  div gt    and the css    container           display  grid          width  30em            imgbg           background  url bg3 jpg  no-repeat center          background-size  cover          grid-column  1 -1          grid-row  1 -1          filter  blur 4px                   container h2           text-transform  uppercase          grid-column  1 -1          grid-row  1 -1          z-index  2

User · Answer

I didn t write this  but I noticed there was a polyfill for the partially supported backdrop-filter using the CSS SASS compiler  so if you have a compilation pipeline it can be achieved nicely  it also uses TypeScript    https   codepen io mixal bl4 pen EwPMWo

User · Answer

fondo  url  grid assets img backimage png         padding  0  margin  0     body          before          content      height  1008px  width  100   display  flex  position  absolute           background-image   fondo   background-repeat  no-repeat   background-position           center  background-size  cover  filter  blur 1 6rem

User · Answer

All you actually need is  filter    blur   WhatEverYouWantInPixels         x000D   x000D  body   x000D      color   fff  x000D      font-family  Helvetica  Arial  sans-serif  x000D    x000D   x000D   background   x000D      background-image  url  https   cdn2 geckoandfly com wp-content uploads 2018 03 ios-11-3840x2160-4k-5k-beach-ocean-13655 jpg    x000D      background-repeat  no-repeat  x000D      background-size  cover  x000D      width  100vw  x000D      height  100vh  x000D      overflow  hidden  x000D      position  absolute  x000D      top  0  x000D      left  0  x000D      z-index  -1  x000D   x000D         START    x000D         START    x000D         START    x000D         START    x000D   x000D         You can adjust the blur-radius as you d like    x000D      filter  blur 3px   x000D    x000D   lt div id  background  gt  lt  div gt  x000D   x000D   lt p id  randomContent  gt Lorem Ipsum lt  p gt  x000D   x000D   x000D

User · Answer

You can create a div over the image you want to apply the filter and use backdrop-filter to its CSS class  Check out this link

User · Answer

Please check the below code -   x000D   x000D   backgroundImageCVR  x000D   position relative  x000D   padding 15px  x000D    x000D   background-image  x000D   position absolute  x000D   left 0  x000D   right 0  x000D   top 0  x000D   bottom 0  x000D   background url  http   www planwallpaper com static images colorful-triangles-background yB0qTG6 jpg    x000D   background-size cover  x000D   z-index 1  x000D   -webkit-filter  blur 10px   x000D    -moz-filter  blur 10px   x000D    -o-filter  blur 10px   x000D    -ms-filter  blur 10px   x000D    filter  blur 10px    x000D    x000D   content  x000D   position relative  x000D   z-index 2  x000D   color  fff  x000D    x000D   lt div class  backgroundImageCVR  gt  x000D       lt div class  background-image  gt  lt  div gt  x000D       lt div class  content  gt  x000D         lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Duis aliquam erat in ante malesuada  facilisis semper nulla semper  Phasellus sapien neque  faucibus in malesuada quis  lacinia et libero  Sed sed turpis tellus  Etiam ac aliquam tortor  eleifend rhoncus metus  Ut turpis massa  sollicitudin sit amet molestie a  posuere sit amet nisl  Mauris tincidunt cursus posuere  Nam commodo libero quis lacus sodales  nec feugiat ante posuere  Donec pulvinar auctor commodo  Donec egestas diam ut mi adipiscing  quis lacinia mauris condimentum  Quisque quis odio venenatis  venenatis nisi a  vehicula ipsum  Etiam at nisl eu felis vulputate porta  lt  p gt  x000D         lt p gt Fusce ut placerat eros  Aliquam consequat in augue sed convallis  Donec orci urna  tincidunt vel dui at  elementum semper dolor  Donec tincidunt risus sed magna dictum  quis luctus metus volutpat  Donec accumsan et nunc vulputate accumsan  Vestibulum tempor  erat in mattis fringilla  elit urna ornare nunc  vel pretium elit sem quis orci  Vivamus condimentum dictum tempor  Nam at est ante  Sed lobortis et lorem in sagittis  In suscipit in est et vehicula  lt  p gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

As stated in other answers this can be achieved with   A copy of the blurred image as the background  A pseudo element that can be filtered then positioned behind the content   You can also use backdrop-filter There is a supported property called backdrop-filter  and it is currently supported in Chrome 76  Edge  Safari  and iOS Safari  see caniuse com for statistics   From Mozilla devdocs   The backdrop-filter property provides for effects like blurring or color shifting the area behind an element  which can then be seen through that element by adjusting the element s transparency opacity   See caniuse com for usage statistics  You would use it like so  If you do not want content inside to be blurred use the utility class  u-non-blurred  x000D   x000D   background-filter  after     -webkit-backdrop-filter  blur 5px      Use for Safari 9   Edge 17   not a mistake  and iOS Safari 9 2       backdrop-filter  blur 5px      Supported in Chrome 76       content        display  block    position  absolute    width  100   height  100     top  0      background-filter     position  relative      background     background-image  url  https   upload wikimedia org wikipedia en 6 62 Kermit the Frog jpg      width  200px    height  200px        Use for content that should not be blurred     u-non-blurred     position  relative    z-index  1    x000D   lt div class  background background-filter  gt  lt  div gt   lt div class  background background-filter  gt     lt h1 class  u-non-blurred  gt Kermit D  Frog lt  h1 gt   lt  div gt  x000D   x000D   x000D   Update  12 06 2019   Chromium will ship with backdrop-filter enabled by default in version 76 which is due out 30 07 2019  Update  01 06 2019   The Mozzilla Firefox team has announced it will start working on implementing this soon  Update  21 05 2019   Chromium just announced backdrop-filter is available in chrome canary without enabling  quot Enable Experimental Web Platform Features quot  flag  This means backdrop-filter is very close to being implemented on all chrome platforms

User · Answer

If you want to content to be scrollable  set the position of the content to absolute   content      position  absolute             I don t know if this was just for me  but if not that s the fix   Also since the background is fixed  it means you have a  parallax  effect  So now  not only did this person teach you how to make a blurry background  but it is also a parallax background effect

User · Answer

Of course  this is not a CSS-solution  but you can use the CDN Proton with filter   body       background  url  https   i0 wp com IMAGEURL w 600 amp filter blurgaussian amp smooth 1        It is from https   developer wordpress com docs photon api  filter

User · Answer

You need to re-structure your HTML in order to do this  You have to blur the whole element in order to blur the background  So if you want to blur only the background  it has to be its own element

User · Answer

Although all the solutions mentioned are very clever  all seemed to have minor issues or potential knock on effects with other elements on the page when I tried them   In the end to save time I simply went back to my old solution  I used Paint NET and went to Effects  Gaussian Blur with a radius 5 to 10 pixels and just saved that as the page image    -   HTML    lt body class  mainbody  gt   lt  body   CSS   body mainbody       background  url     images myphoto blurred png        -moz-background-size  cover      -webkit-background-size  cover      background-size  cover      background-position  top center  important      background-repeat  no-repeat  important      background-attachment  fixed      EDIT   I finally got it working  but the solution is by no means straightforward  See here    filter  blur 1px   doesn  39 t work in firefox  IE  and opera

User · Answer

Without using the pseudo-class from   x000D   x000D  body  x000D      background  cecece  x000D      font-family   Scope One   serif  x000D      font-size  12px  x000D      color black  x000D      margin 0 auto  x000D      height 100   x000D      width 100   x000D      background-image   x000D         linear-gradient to bottom  rgba 0  0  0  0 8   rgba 0  0  0  0 81     x000D          url https   i imgur com 2rRMQh7 jpg   x000D         -webkit-background-size  cover  x000D          -moz-background-size  cover  x000D          -o-background-size  cover  x000D          background-size  cover   x000D    x000D   lt body gt  lt  body gt  x000D   x000D   x000D

[css] How to apply a CSS filter to a background image

Examples related to css

Examples related to background-image

Examples related to css-filters