Created
March 18, 2013 03:47
-
-
Save nladart/5184948 to your computer and use it in GitHub Desktop.
A CodePen by bookcasey. Full bleed background images with CSS3 filter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@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