Appliquer un effet de flou sur son background

Pour mettre une image en floutée, on connait l’attribut css blur.
Afin d’appliquer cet effet sur une page, on peut utiliser les pseudo-éléments comme before.

Voici un exemple de code qui marche sur un de mes sites:

body {
position: absolute;
        top: 0; bottom: 0; left: 0; right: 0;
        height: 100%;
    margin:0;
    padding:0;
    background-size: 100% ;
    width:100%;  
    color:black;
}
body:before {
        content: "";
        position: fixed;
        height: 100%; width: 100%;
        background: url(images/legumes.jpeg);
        background-size: cover;
        z-index: -1; /* Keep the background behind the content */     
        -webkit-filter: blur(8px);
    -webkit-background-size: cover; /* pour Chrome et Safari */
    -moz-background-size: cover; /* pour Firefox */
    -o-background-size: cover; /* pour Opera */
    background-size: cover; /* version standardisée */
    }

J’applique un pseudo-éléments before au body . Je lui donne une position fixed, avec une width et une height de 100%, et sur laquelle j’applique les filtres blur.

See the Pen blur effect on background by yuyazz (@yuyazz) on CodePen.

23/11/2014 Mis à jour le 24/12/2018 Par Copier coller | Dans CSS