Blur Background Image

The blur(): It is a CSS function of filter property that converts image to blur.

Blur Background Image

HTML
<div class="background"></div>
CSS
body, html {
  height: 100%;
}

.background {
   background-image: url("https://images.pexels.com/photos/2119706/pexels-photo-2119706.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940");
  filter: blur(5px);
  -webkit-filter: blur(5px);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

DEMO

View Demo
1,220 Views
31020cookie-checkBlur Background Image

Leave a Reply

Your email address will not be published. Required fields are marked *