Blurred background image

by Greg Bowler

HTML

<div id="container">
    <img src="//i.imgur.com/qm6aw07.png" />
    
    <h1>13:37</h1>
    <p>This is a very blurred photo of a beach.</p>
    <p><a href="//i.imgur.com/qm6aw07.png">Original photo</a>.</p>
    <p>Merry Christmas to you.</p>
</div>

CSS

img {
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    filter: blur(15px);
    
    position: absolute;
    z-index: -10;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
}
#container {
    position: relative;
    overflow: hidden;
    width: 320px;
    height: 512px;
    margin: 0 auto;
}
body {
    background: black;
}

h1, p, a {
    font-family: Helvetica, Arial, sans-serif;
    font-weight: 100;
    color: #fff;
    text-align: center;
    color: #fff;
}