Hello, it turns out that I have the following code that puts an image behind with boostrap 4, but I don't know how to put a blur effect on it without affecting the content, as this code shows:
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>So I don't know how I can make it look good, is there a property for bootstrap or is it handled with css3? . If you could help me it would be very helpful. Thank you.
Well looking around I found the solution I leave it here so you can see it to see if it seems correct, but for the moment it works for me, it would only be to make it responsive.
Create two classes
background-imagethat is in charge of placing the image and making the effectblur, and the classcontentthat is in charge of keeping the content where it is centered with the bootstrap 4 properties.There is a very simple way to achieve this, you just have to add a pseudo element, to the tag that has the background you want to blur. I recommend you use, for example, a class called "background-blur" (or the one you want) like this:
And in the css, just add .
In this case it
fondo-bluris a class to apply directly to any element that has a background image and you want it to have a "blur" effect. For more detail each property does the following:background: inheritwill inherit all properties you assign to the parent like:background-image, background-size, background-color, background-position, etc, you can override them, but it's optional.transform: scale()so that it grows a bit larger than the containing element and by addingoverflow: hidden, we hide everything that protrudes from the parent, in your case the tag<body>.position, left, width, etc) are to fill the size of the parent.In your case, the container element is the same
body, so I'll simply add these same properties to your tag directly in the css, an example:You can do it like this or the way I told you at the beginning.