<div class="wp">
        <div class="bg"></div>
        <div class="text">
            H5
        </div>
    </div>
.wp {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg {
  background: url(http://lovechengfu.com/blog/wp-content/uploads/2017/03/12619090875185.jpg)
    center no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  filter:blur(5px);
  z-index: -1;;
}
.text {
  width: 200px;
  height: 200px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  background: url(http://lovechengfu.com/blog/wp-content/uploads/2017/03/12619090875185.jpg)
    center no-repeat;
  background-size: cover;
  background-attachment: fixed;
  box-shadow: 0px 0px 70px #111;
  border-radius:5px;
}

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.