Skip to content

Instantly share code, notes, and snippets.

@nladart
Created March 18, 2013 03:47
Show Gist options
  • Save nladart/5184948 to your computer and use it in GitHub Desktop.
Save nladart/5184948 to your computer and use it in GitHub Desktop.
A CodePen by bookcasey. Full bleed background images with CSS3 filter
<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>
@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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment