How can I apply blur effect on a background image in Boostrap

Question

I am trying to apply a simple blur effect on the first row of my page that has a fullscreen background image.

The problem is, I am seeing shadows on the borders of the background image that aren't supposed to be there and on top of that, the logo that is positioned on top of the background image is being blurred too.

I understand I am blurring the intro div which in turn is blurring everything within it, so I must be applying the background image incorrectly as well.

What is the best way to achieve this?

Thank you.

<div class="intro">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-12 text-center">
        <img src="assets/img/logo.png" alt="Logo" class="logo">
      </div>
    </div>
  </div>
</div>

<div class="container">
    <div class="row">
        <h1>Another row</h1>
    </div>
</div>

This is the CSS

html, body {
    width: 100%;
    height: 100%;
}
body {
    background-color: #191617;
}
.logo {
    width: 220px;
    margin-top: 10em;
}

.intro {
    background: url('../img/bg/bg2.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -o-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

Demo https://jsfiddle.net/0334yL41/1/

create a pseudo-element on intro to emulate the background whitout affecting all the content — DaniP, Mar 23 '17 at 16:04

score 2 · Accepted Answer · answered Mar 23 '17 at 16:13

You can use a pseudoelement to hold the background image without affecting other content.

To remove the dark edges, you can use transform: scale(). This will create scrollbars so you'll need to set .intro to overflow: hidden. You could also try remove the edges using positioning.

fiddle

.intro {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.intro::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('http://i.imgur.com/hNPuImp.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
  transform: scale(1.1);
}

How can I apply blur effect on a background image in Boostrap

1 Answers1