Skip to content

Instantly share code, notes, and snippets.

@oliverdoetsch
Created December 28, 2013 20:53
Show Gist options
  • Save oliverdoetsch/8164086 to your computer and use it in GitHub Desktop.
Save oliverdoetsch/8164086 to your computer and use it in GitHub Desktop.
backstretch
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: Helvetica, Arial, sans-serif;
line-height: 1.3em;
-webkit-font-smoothing: antialiased;
}
.container {
width: 90%;
margin: 20px auto;
background-color: rgba(255,255,255,.80);
padding: 20px;
text-align: center;
}
.other { color: #FFF }
.other div {
position: absolute;
bottom: 0;
width: 90%;
background: #000;
background: rgba(0,0,0,0.7);
}
.other div p {
padding: 10px;
text-align: center;
}
.button {
display: inline-block;
margin: 0 0.2em;
padding: 13px;
border: 1px solid black;
border-radius: 2px;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
/* Font styles */
text-decoration: none;
font-weight: bold;
color: black;
}
.button:hover {
background: #000;
color: #fff;
}
.button:active {
background: #444;
color: #fdfdfd;
}
.button:visited { background: black }
</style>
</head>
<body>
<div class="container">
<h1>Googledrive.com</h1>
<p>Ein Boilerplate-Layout in Googledrive gehostet - Hintergrundbild mit backstretch.js fixiert!</p><a class="button" href="http://5202.blogspot.com/2012/12/nachgelegt-website-auf-google-drive.html
"><< Back to post<a>
<div class="other">
<div><p>Katsushika Hokusai: Die grosse Welle vor Kanagawa</p></div>
</div>
</div>
<script src="https://googledrive.com/host/0B9jiMv20C91YdHNWWEpfOGR0cWc/libs/jquery/jquery.js"></script>
<script src="https://googledrive.com/host/0B9jiMv20C91YdHNWWEpfOGR0cWc/src/jquery.backstretch.js"></script>
<script>
$.backstretch(["https://lh5.googleusercontent.com/-M3Ykl2dQNcw/ULzHCe4jOYI/AAAAAAAADIc/bMR8Ryo7tLk/s2000/katsushika_HOKUSAI_grosse_welle_kanagawa.jpeg"]);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment