Skip to content

Instantly share code, notes, and snippets.

@kylejson

kylejson/faux-parallax.html

Last active August 29, 2015 13:56
Show Gist options
  • Save kylejson/9085449 to your computer and use it in GitHub Desktop.
Save kylejson/9085449 to your computer and use it in GitHub Desktop.
Download ZIP
Using background-size: cover; property and background-position: fixed to give off a cool scrolling effect!
Raw
faux-parallax.html
<!Doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>Faux-parallax</title>
<link href='http://fonts.googleapis.com/css?family=Oleo+Script' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
text-align: center;
margin: 0;
padding: 0;
}
h1 {
margin: 0;
color: white;
font-size: 40px;
font-family: 'Oleo Script' cursive;
background-color: rgba(28,107,160,0.5);
}
h2 {
color: white;
font-size: 40px;
font-family: 'Oleo Script' cursive;
margin: 0;
}
header {
width: 100%;
height: 500px;
background: url('http://bit.ly/1gTkX7S') no-repeat center center fixed; /*fixed*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#content, footer{
background-color: rgb(173,152,122);
color:white;
font-family: 'Oleo Script' cursive;
font-size: 30px;
padding: 5%;
}
#starfish {
width: 100%;
height: 500px;
background: url('http://bit.ly/1qLAZaK') no-repeat center center fixed; /*fixed*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
</style>
</head>
<body>
<header>
<h1>Easy Breezy Faux-Parallax Background Images</h1>
</header>
<div id="content">
<p>Shabby chic quinoa Intelligentsia, lo-fi selfies gastropub roof party PBR&B consequat pork belly. Letterpress vegan mustache kale chips chillwave swag shabby chic High Life, non fugiat leggings Williamsburg sartorial. Sriracha put a bird on it readymade, tote bag ullamco disrupt Truffaut Terry Richardson fixie. Bicycle rights deep v Thundercats, eiusmod cred officia quis est squid Tonx. Pork belly pop-up et sapiente cornhole chillwave. Placeat asymmetrical authentic, wolf Tonx Etsy irure keffiyeh Brooklyn post-ironic bespoke et kogi adipisicing. Sriracha vinyl sustainable ethical tempor wolf hashtag, cray assumenda letterpress you probably haven't heard of them.</p>
</div>
<div id="starfish">
<h1>This is simple, fun, and flashy! Isn't it awesome!</h1>
</div>
<footer>
<h2>© Copyright 2014 The Island Breezes</h2>
</footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment