Appliquer un effet de flou sur son background

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.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.