Как сделать фон размытым CSS

Как сделать фон размытым CSS

Для того, чтобы сделать фон сайта размытым можно использовать псевдоэлемент ::before для тега body, в этом случае в коде HTML не нужно прописывать дополнительный div, только свойства CSS. Но когда нужно сделать фон для элемента размытым можно использовать дополнительный div. На примере показан размытый фон для элемента div, но так же прописан пример CSS для тега body.

Пример

Lorem Ipsum

HTML


<div class="bg-ex-blur">
  <div class="img-blur"></div>
  <span>Lorem Ipsum</span>
</div>

CSS для DIV


.bg-ex-blur{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 350px;
}
.img-blur{
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 350px;
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  filter: blur(5px); /* Размытие картинки */
}
.bg-ex-blur span{
  z-index: 2;
}

CSS для BODY


body::before {
  content: '';
  left: 0; 
  right: 0; 
  top: 0; 
  bottom: 0; 
  z-index: -1; 
  background: url(image.jpg); /* Путь к картинке */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  position: fixed;
  filter: blur(5px); /* Размытие картинки */
}
By julia