Untitled

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div class="container">
      <div class="bg-img"></div>
    </div>
    
    <div class="container">
      <div class="bg-img with-translate"></div>
    </div>
  </body>

</html>

/* Styles go here */

.container {
  border: 1px solid red;
  height: 200px;
  margin: 50px;
  width: 400px;
}

.bg-img {
  background: center no-repeat cover;
  background-image: url('http://lorempixel.com/800/400/sports/');
  -webkit-filter: blur(10px);
  height: 100%;
  overflow: hidden;
  width: 100%;
}

.bg-img.with-translate {
  -webkit-transform: translate3d(0, 0, 0);
}