How to defocus only the image of a background-image?

Question

How to defocus only the image of a background-image?

Navigation

#1 by (1 votes)

0

I have an image for a background of the body on my site and I want to apply a bit of blur, it turns out that when I apply the blur property I blur all the div and my container, but not the body.

body{ background-image: url("ruta"); filter: blur(6px); }

<body>
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>

I also tried adding with a class in css, but it does not work for me.

.fondo-body{
background-image: url("ruta");
filter: blur(6px);

}

<body class="fondo-body">
<div class="container">
    <div class="row">
        <div class="col">
            <h1>Logo</h1>
        </div>
    </div>
</div>

html css bootstrap

asked by Jean Luis Soto Robles 01.10.2018 в 01:01

source

1 answer

Python: Assignment or erroneous data printing in nodes Slider is not properly configured

score 1 · Accepted Answer

You can try placing it in the pseudo :before of the body, staying like this:

body:before {
  filter: blur(2px);
  content: "";
  position: absolute;
  height: 20%; 
  width: 20%;
  background: url(http://lorempixel.com/420/255);
  background-size: cover;
  z-index: -1;
  -webkit-transform: scale(5);
  -webkit-transform-origin: top left;
}

.container{
  z-index:99999;
}

<body>
  <div class="container">
    <div class="row">
      <div class="col">
        <h1>Logo</h1>
      </div>
    </div>
  </div>
</body>

I hope it serves you.