0

I want to make a global blured background, therefore i set background-image to the tag, then i created a blur filter property, but It turned out to be useless. The image remained non-blured. How to blur it?

body{
background-image: url(676685.jpg);
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);

}

Alex Matvi
  • 1
  • 2

3 Answers3

1

Hope This Hepls!!

body, html {
  height: 100%;
    background-image: url("https://cdn.britannica.com/24/174524-050-A851D3F2/Oranges.jpg");
    background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(8px);
  -webkit-filter: blur(8px);
}

* {
  box-sizing: border-box;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>


</body>
</html>
Nutan Panta
  • 59
  • 1
  • 16
0

Don't add filter: blur to the body element. It will everything inside body blurry.

If you you don't have a blurry version of the bg image, you will need to create an separate container element that is stretch across the screen, have the background image attached to that elemen and add the blur filter.

You actual content should then be placed on a separate container displayed on top of the bg container.

Ricardo
  • 246
  • 3
  • 11
0

You could apply the background image and filter to a pseudo element on the body. I would suggest that you apply blur on an img tag rather than the body itself.

    body:before {
    content: "";
    position: absolute;
    background: url(676685.jpg);
    background-size: cover;
    z-index: -1; /* Keep the background behind the content */
    height: 20%; width: 20%; /* Using Glen Maddern's trick /via @mente */

    /* don't forget to use the prefixes you need */
    transform: scale(5);
    transform-origin: top left;
    filter: blur(2px);
}
timmyx
  • 166
  • 9