Hola resulta que tengo el siguiente código que pone una imagen detrás con boostrap 4, pero no se como ponerle un efecto blur sin que afecte al contenido como lo muestra este código:
html,body{
height: 100%;
width: 100%;
}
body{
/* The image used */
background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
/* Full height */
height: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
-webkit-filter: blur(5px);
-moz-filter: blur(5px);
-o-filter: blur(5px);
-ms-filter: blur(5px);
filter: blur(5px);
}
.vdivide [class*='col-6']:not(:last-child):after {
background: #e0e0e0;
width: 1px;
content: "";
display:block;
position: absolute;
top:0;
bottom: 0;
right: 0;
min-height: 70px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container-fluid h-100 ">
<div class="row h-100 justify-content-center align-items-center">
<div class="card col-8">
<div class="card-body w-100 col">
<div class="row vdivide ">
<div class="col-6 ">
<img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
</div>
<div class="col-6">
<img src="http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-823.jpg" class="w-100">
</div>
</div>
</div>
</div>
</div>
Entonces no se como puedo hacer para que quede bien, ¿Existe alguna propiedad para bootstrap o se maneja con css3? . Si me pudieran ayudar sería de mucha ayuda.Gracias.