A CodePen by bookcasey. Full bleed background images with CSS3 filter

index.html

<h1>Hip, full bleed background images</h1>
<h2>Mobile friendly <a href="http://i.imgur.com/tSTc4MJl.jpg">14kb image</a></h2>

<p>Photo by <a href="http://www.flickr.com/photos/genbug/4894554385/">Lauren Gilmore</a>

style.sass

@import "compass"
// Only looks good in Webkit, degrades gracefully but unattracively in browsers that do not support filter()

body
  width: 100%
  overflow-x: hidden
  font-family: 'Helvetica Neue', sans-serif
  font-weight: 200
  text-align: center
  -webkit-font-smoothing: antialiased
  color: white

h1
  margin-top: 2em
  font-size: 3em

h2
  margin-top: 1em
  font-size: 2em

h1::after
  content: ''
  position: absolute
  top: -25px
  left: -25px
  padding: 50px
  width: 100%
  height: 100%
  z-index: -1
  background-image: url(http://i.imgur.com/tSTc4MJ.jpg)
  +background-size(cover)
  +filter(blur(10px))

p
  position: absolute
  bottom: -5em
  width: 100%
  height: 4em
  line-height: 4em
  background: black
  a
    padding: .25em .5em
a
  text-decoration: none
  background: rgba(white, .1)
  padding: 0 .2em
  border-radius: .25em
  color: white


html
  min-height: 10em