5

I have to blur only the bottom half portion of a background image. It should be like,

enter image description here

This code blurs the whole image:

<style>
body {
  background-image: url('ms.png');
  background-size:100% auto;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
</style>

How to do it using CSS?

N3R4ZZuRR0
  • 2,400
  • 4
  • 18
  • 32
  • 1
    The best option would be to absolutely position another element inside your background container. Check this out. http://stackoverflow.com/questions/30470204/is-it-possible-to-blur-only-specific-part-of-the-image-using-css-filter – Isabel Inc Jul 22 '16 at 14:35
  • 1
    Here is another example of a similar question asked previously [link](http://stackoverflow.com/questions/26265041/blur-part-of-an-image-with-css) – The Gav Lad Jul 22 '16 at 14:40
  • Yeah, that works for me. – N3R4ZZuRR0 Jul 22 '16 at 14:59

0 Answers0