<body>
<div class="wrapper">
  <section>
    <div class="content">
      <div class="text">
<h1>背景ぼかしデモ</h1>
<p>背景画像に写真をそのまま使うと<br>印象が強すぎてしまう時に使うと<br>いい感じになると思います。</p>
      </div>
    </div>
  </section>
  <footer class="footer">
    <small class="footer-copyright">Footer</small>
  </footer>
</div>
  </body>
body {
  margin: 0px;
}
h1{
  margin-top:50px;
  color:#ffad9e;
  font-size: 30px;
  font-weight: bold;
}
p{
  color:#a9a9a9;
}
.wrapper {
  display: -ms-grid;
  display: grid;
  -ms-grid-rows: 1fr 26px;
  grid-template-rows: 1fr 26px;
  -ms-grid-columns: 1fr;
  grid-template-columns: 1fr;
  height: 100vh;
}
.content {
  width: 100vw;
  height: 100%;
  background:#fff     url(https://dl.dropbox.com/s/dxgow3oehtk6jn3/background.jpg) no-repeat center center;
  background-size:cover;
  position: relative;
  z-index: 0;
  overflow: hidden;
  -ms-flex-pack: center;
  -ms-flex-align: center;
  justify-content: center;
  align-items: center;
  display: flex;
}

.content:before {
  content: '';
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  right: -5px;
  background: inherit;
  filter: blur(5px);
  z-index: -1;
}
.text{
  margin:30px;
  background-color: #fff;
  padding:30px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  text-align: center;
}

.footer {
  text-align: center;
  background-color: #75d8d0;
}
.footer-copyright {
  color: #fff;
  font-size: 10px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.