JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<script src="http://fonts.googleapis.com/css?family=Arimo|Roboto+Slab:700"></script>
<body>
<nav id="nav" role="navigation">
<a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
<ul style="position:relative">
<li>
<a href="/">Menu</a>
<ul>
<li><a href="#biography">Bio</a></li>
<li><a href="#story">Story</a></li>
<li><a href="#proposal">Proposal</a></li>
<li><a href="#gallery">Gallery</a></li>
<li><a href="#rsvp">RSVP</a></li>
<li><a href="#thedate">The Date</a></li>
<li><a href="#party">Party</a></li>
<li><a href="#thankyou">Thank You</a></li>
</ul>
</li>
</ul>
</nav>
<section id="annoucement" class="backgroundphotos">
<div class="row">
<div id="proclaim" class="col-md-6 col-md-offset-3">
<h1 id="wearegettingmarried" >We are<br>getting married!<br>05.10.2013</h1>
</div>
</div>
</section>
<section id="biographies" class="backgroundphotos">
<div class="row">
<div class="col-md-10 col-md-offset-1 panel panel-default">
<div class="row">
<div class="col-md-3 col-md-offset-2">
<div>
<img id="pink-bio-bird" src="http://www.victorandalpha.com/images/pink_bird_36.png" alt="Pink Bird"/>
<h1 id="alpha-bio-heading">Alpha</h1>
</div>
<p>One of my earliest memories of Vic is of being seated behind him in year 7 grade assembly and thinking that he was one of the loudest...
CSS
/* http://css-tricks.com/perfect-full-page-background-image/ */
/* html {
background: url(http://www.victorandalpha.com/images/6133364748_89f2365922_o.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}*/
body {
padding-top: 20px;
font-size: 16px;
font-family: "Open Sans",serif;
background: transparent;
}
/*h1 {
font-family: "Abel", Arial, sans-serif;
font-weight: 400;
font-size: 40px;
}*/
/* Override B3 .panel adding a subtly transparent background */
.panel {
background-color: rgba(255, 255, 255, 0.90);
}
.backgroundphotos {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-attachment: scroll; /* Why does this not carry over? */
min-height: 800px;
}
#annoucement {
background: url(http://www.victorandalpha.com/images/01.jpg) no-repeat center center fixed;
background-attachment: scroll; /* This should be the default - not sure why it isn't */
}
#proclaim {
position: absolute;
bottom: -0.625em;
/*bottom: 200px;*/
}
#wearegettingmarried {
font-family: 'Roboto Slab', serif;
font-size: 4em;
line-height: 0.875;
text-align: center;
color: white;
text-transform: uppercase;
}
#biographies {
background: url(http://www.victorandalpha.com/images/02.jpg) no-repeat center center fixed;
background-attachment: scroll;
}
#biographies h1 {
...
JavaScript
$('section').css('height', innerHeight);