Skip to content

Instantly share code, notes, and snippets.

@wnda

wnda/index.html

Created March 22, 2015 20:50
Show Gist options
  • Save wnda/e01aa616431bc84df81a to your computer and use it in GitHub Desktop.
Save wnda/e01aa616431bc84df81a to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin // source http://jsbin.com/xoyigugiqi
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<style id="jsbin-css">
html,body {
height: 100%;
}
body {
background: #f6f6f6;
margin: 0 0 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
.header {
width: 100%;
position: fixed;
height: 100px;
top: 0;
z-index: 100;
background: #fff;
}
.container {
position: relative;
}
.section {
position: relative;
width: 100%;
height: 400px;
background: #99A478;
}
.section span {
position: absolute;
z-index: 2;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
color: #fff;
width: 50%;
height: 1rem;
text-align: center;
}
.section-image {
width: 100%;
padding: 0;
}
.section-clip {
position: absolute;
clip: rect(auto,auto,auto,auto);
width: 100%;
height: 100%;
}
.img-1 {
background: #99A478 url(http://i.imgur.com/hVWBksT.jpg) no-repeat 50% 50%;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.img-2 {
background: #99A478 url(http://i.imgur.com/P1RvfyH.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.img-3 {
background: #99A478 url(http://i.imgur.com/gqEmQlE.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.img-4 {
background: #99A478 url(http://i.imgur.com/z7Zbh9f.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.footer {
position: relative;
background: #333;
overflow: hidden;
}
.footer p {
color: #fff;
margin: 1em 2em;
}
</style>
</head>
<body>
<div class="header">
<p>Alternate Fixed &amp; Scroll Backgrounds</p>
</div>
<div class="container">
<div class="section section-img">
<span>Lorem ipsum dolor sit amet.</span>
<div class="section-clip">
<div class="img-1"></div>
</div>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
</div>
<div class="section section-img">
<span>Lorem ipsum dolor sit amet.</span>
<div class="section-clip">
<div class="img-2"></div>
</div>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
</div>
<div class="section section-img">
<span>Lorem ipsum dolor sit amet.</span>
<div class="section-clip">
<div class="img-3"></div>
</div>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
</div>
<div class="section section-img">
<span>Lorem ipsum dolor sit amet.</span>
<div class="section-clip">
<div class="img-4"></div>
</div>
</div>
<div class="section">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi, mollitia, repellendus sapiente repudiandae labore rerum amet culpa inventore, modi non. Quo nisi veritatis vitae nam, labore fugit. Inventore culpa iusto, officia exercitationem.</p>
</div>
</div>
<div class="footer">
<p>footer</p>
</div>
<script id="jsbin-source-css" type="text/css">html,body {
height: 100%;
}
body {
background: #f6f6f6;
margin: 0 0 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
.header {
width: 100%;
position: fixed;
height: 100px;
top: 0;
z-index: 100;
background: #fff;
}
.container {
position: relative;
}
.section {
position: relative;
width: 100%;
height: 400px;
background: #99A478;
}
.section span {
position: absolute;
z-index: 2;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
color: #fff;
width: 50%;
height: 1rem;
text-align: center;
}
.section-image {
width: 100%;
padding: 0;
}
.section-clip {
position: absolute;
clip: rect(auto,auto,auto,auto);
width: 100%;
height: 100%;
}
.img-1 {
background: #99A478 url(http://i.imgur.com/hVWBksT.jpg) no-repeat 50% 50%;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.img-2 {
background: #99A478 url(http://i.imgur.com/P1RvfyH.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.img-3 {
background: #99A478 url(http://i.imgur.com/gqEmQlE.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.img-4 {
background: #99A478 url(http://i.imgur.com/z7Zbh9f.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.footer {
position: relative;
background: #333;
overflow: hidden;
}
.footer p {
color: #fff;
margin: 1em 2em;
}</script>
</body>
</html>
Raw
jsbin.xoyigugiqi.css
html,body {
height: 100%;
}
body {
background: #f6f6f6;
margin: 0 0 0;
padding: 0;
font-family: Helvetica, Arial, sans-serif;
}
.header {
width: 100%;
position: fixed;
height: 100px;
top: 0;
z-index: 100;
background: #fff;
}
.container {
position: relative;
}
.section {
position: relative;
width: 100%;
height: 400px;
background: #99A478;
}
.section span {
position: absolute;
z-index: 2;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
color: #fff;
width: 50%;
height: 1rem;
text-align: center;
}
.section-image {
width: 100%;
padding: 0;
}
.section-clip {
position: absolute;
clip: rect(auto,auto,auto,auto);
width: 100%;
height: 100%;
}
.img-1 {
background: #99A478 url(http://i.imgur.com/hVWBksT.jpg) no-repeat 50% 50%;
background-size: cover;
position: fixed;
width: 100%;
height: 100%;
top: 0;
}
.img-2 {
background: #99A478 url(http://i.imgur.com/P1RvfyH.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.img-3 {
background: #99A478 url(http://i.imgur.com/gqEmQlE.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.img-4 {
background: #99A478 url(http://i.imgur.com/z7Zbh9f.jpg) 50% 50%;
position: fixed;
background-size: cover;
width: 100%;
height: 100%;
top: 0;
}
.footer {
position: relative;
background: #333;
overflow: hidden;
}
.footer p {
color: #fff;
margin: 1em 2em;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment