Skip to content

Instantly share code, notes, and snippets.

@valerysntx

valerysntx/CSS-mask-image.markdown

Created October 15, 2014 16:33
Show Gist options
  • Save valerysntx/cc719213a5f6f6de68e6 to your computer and use it in GitHub Desktop.
Save valerysntx/cc719213a5f6f6de68e6 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Ludvig Lindblom.
Raw
index.html
<h1>SUMMER</h1>
Raw
style.css
@import url(http://fonts.googleapis.com/css?family=Chivo:900);
html {
background: #eee url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5383/Nature-HD-Pictures.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: 'Chivo', sans-serif;
height: 100%;
font-size: 62.5%;
}
body {
min-height: 100%;
display: table;
width: 100%;
}
h1 {
display: table-cell;
text-align: center;
vertical-align: middle;
font-size: 20em;
margin: 0 auto;
padding: 0;
text-align: center;
color: #eee;
-webkit-mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5383/splatter-mask_1_1.png");
mask-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/5383/splatter-mask_1_1.png");
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment