How to put a background image with bootstrap 4 with blur effect?

Navigation
5

Hello it turns out that I have the following code that puts an image behind with boostrap 4, but I do not know how to put a blur effect 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>

Then I do not know how I can do it so it looks good, is there any property for bootstrap or is it managed with css3? . If they could help me, it would be very helpful. Thank you.

    
asked by Sebastián Lagos Yañez 17.04.2018 в 20:12
source

2 answers

2

There is a very simple way to achieve it, you just have to add a pseudo element, to the label that has the background you want to blur. I recommend you use for example a class, called "background-blur" (or whatever you want) like this: 

<body class="fondo-blur">

And in the css, just add. 

.fondo-blur{
  position: relative;
  overflow: hidden;
}

.fondo-blur::before{
  content: '';
  display: block;
  background: inherit;
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  filter: blur(15px);
  transform: scale(1.2,1.4);
}

In this case fondo-blur is a class to apply directly to any element that has a background image and you want it to have the effect of "blur" or blur. For more detail each property does the following:

  • With background: inherit will inherit all the properties that you assign to the parent as: background-image, background-size, background-color, background-position, etc , you can re-write them, but it is optional.
  • As the blur causes the edges to also become diffuse, I recommend using transform: scale() to enlarge a little more than the container element and adding overflow: hidden , we hide everything that stands out from the parent, in your case the label <body> .
  • The other properties ( position, left, width, etc ) are for it to occupy the full size of the parent.

In your case, the container element is the same body , so I will simply add these same properties to your label directly in the css, an example: 

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;
  position: relative;
  overflow: hidden;
}

body::before{
  content: '';
  display: block;
  background: inherit;
  position: absolute;
  width: 100%; height: 100%;
  left: 0; top: 0;
  filter: blur(15px);
  transform: scale(1.2,1.4);
}

.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>

You can do it this way or in the way I mentioned at the beginning.

    
answered by 18.04.2018 / 03:45
source
2

Well looking for there I found the solution I leave it here to see it to see if it seems correct, but for the time being, it would only be responsive. 

html,body{
            height: 100%;
            width: 100%;
        }
        .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;
        }

        .background-image {
             background-image: url(http://www.fondos10.net/wp-content/uploads/images/fondos10.net-3d-832.jpg) ;
     
            background-size: cover;
            display: block;

            filter: blur(10px) contrast(30%);

            height: 100%;
            width: 100%;
            left: 0;
            position: fixed;
            right: 0;
            z-index: 1;
        }
        .content {
            left: 0;
            position: fixed;
            right: 0;
            z-index: 2;
        }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!---SE AGREGA ESTE DIV PARA EL FONDO---->
 <div class="background-image"></div>
 <!--------SE AGREGA LA CLASE CONTENT-------->
 <div class="container-fluid h-100  content">
        <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>

Create two classes background-image which is responsible for putting the image and make the effect blur , and class content that ensures that the content is where it is centered with the properties of bootstrap 4.

    
answered by 17.04.2018 в 21:00
Fade only the background of an HTML element Check that the value of a field complies with at least one of 3 conditions