Blur effect on background only

Question

I'm currently building the main page of my app. I want a simple blurry background with login button visible. I used blur(1px) but I can't manage to make it blur only on background. It blurs the entire page.

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.hero.is-info {
  filter: blur(1px);
  -webkit-filter: blur(1px);

  background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.login{
  z-index: 2;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello</title>
    <link
      rel="stylesheet"
      href="https://jenil.github.io/bulmaswatch/litera/bulmaswatch.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="section hero is-info is-fullheight has-text-centered">
      <div class="hero-body login">
        <div class="container">
          <h1 class="title">Title</h1>
          <div id="root"></div>
        </div>
      </div>
    </div>
  </body>
</html>

_“It makes the blur effect on both.”_ - of course it does, because that’s how it works - you blur the whole element, that means everything it contains. FYI, simply typing your question title into the search function of this site would have been enough to find this duplicate. #pleasemakeaneffort — misorude, Nov 28 '18 at 09:37
You might want to try **Opacity**. Have a look at this [link](https://www.w3schools.com/css/css_image_transparency.asp), I believe this is what you are looking for. I hope this can help. — mkyriacou1994, Nov 28 '18 at 09:40

score 1 · Answer 1 · answered Nov 28 '18 at 09:37

Use pseudo elements for these kind of behaviours.

Use ::before or ::after as an overlay for your block.

Try this

body, html {
  height: 100%;
}

* {
  box-sizing: border-box;
}
.hero.is-info{height:100vh;}
.hero.is-info::before {
  filter: blur(1px);
  -webkit-filter: blur(1px);
  position:absolute;
  top:0;
  content:"";
  left:0; 
  width:100%; 
  height:100%;
  background: linear-gradient(
      rgba(0, 0, 0, 0.5),
      rgba(0, 0, 0, 0.5)
    ), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.login{
  z-index: 2;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello</title>
    <link
      rel="stylesheet"
      href="https://jenil.github.io/bulmaswatch/litera/bulmaswatch.min.css"
    />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="section hero is-info is-fullheight has-text-centered">
      <div class="hero-body login">
        <div class="container">
          <h1 class="title">Title</h1>
          <div id="root"></div>
        </div>
      </div>
    </div>
  </body>
</html>

score 1 · Accepted Answer · edited Nov 28 '18 at 10:25

Here is a simple CSS solution without pseudo-classes, but with one more div:

body,
html {
  height: 100%;
}

* {
  box-sizing: border-box;
}

.hero.section {
  padding: 0;
}

.hero .blured-background {
  width: 100%;
  height: 100%;
  position: absolute;
  filter: blur(1px);
  -webkit-filter: blur(1px);
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://unsplash.it/1200/900?random') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
.login {
  z-index: 2;
}

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Hello</title>
    <link rel="stylesheet" href="https://jenil.github.io/bulmaswatch/litera/bulmaswatch.min.css" />
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="section hero is-info is-fullheight has-text-centered">
      <div class="blured-background">
      </div>
      <div class="hero-body login">
        <div class="container">
          <h1 class="title">Title</h1>
          <div id="root"></div>
        </div>
      </div>
    </div>
  </body>
</html>

Blur effect on background only

2 Answers2