Blur Effect on Background

by elizabethkmathew

HTML

<body>

    <header></header>

    <section class="bg-test">
        <div class="container">
            <div class="row">
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
                <p>test</p>
            </div>
        </div>
    </section>

</body>

CSS

.container {
  background: url('http://666a658c624a3c03a6b2-25cda059d975d2f318c03e90bcf17c40.r92.cf1.rackcdn.com/unsplash_527bf56961712_1.JPG') no-repeat left center/cover;
  -webkit-filter: blur(5px);
  -moz-filter: blur(5px);
  -o-filter: blur(5px);
  -ms-filter: blur(5px);
  filter: blur(5px);
}
.row {text-align: center;}
.row p {
  font-size: 16px;
}