JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<script src="http://fonts.googleapis.com/css?family=Arimo:400,700|Roboto+Slab:700"></script>
<nav id="nav" role="navigation">
<!-- <a href="#nav" title="Show navigation">Show navigation</a>
<a href="#" title="Hide navigation">Hide navigation</a>
--> <ul>
<li>
<ul>
<li><a href="#biography"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Bio</a>
</li>
<li><a href="#story"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Story</a>
</li>
<li><a href="#proposal"><img src="http://victorandalpha.com/images/glyphicons_271_ring.png"/>Proposal</a>
</li>
<li><a href="#gallery"><img src="http://victorandalpha.com/images/glyphicons_138_picture.png"/>Gallery</a>
</li>
<li><a href="#rsvp"><img src=".images/glyphicons_120_message_full.png"/>RSVP</a>
</li>
<li><a href="#thedate"><img src="http://victorandalpha.com/images/glyphicons_045_calendar.png"/>The Date</a>
</li>
<li><a href="#party"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Party</a>
</li>
<li><a href="#thankyou"><img src="http://victorandalpha.com/images/glyphicons_088_address_book.png"/>Thank You</a>
</li>
<li><a href="/"><img src="http://victorandalpha.com/images/glyphicons_158_show_lines.png"/>Menu</a></li>
</ul>
</li>
</ul>
</nav>
<section id="annoucement" class="backgroundphotos">
<div...
CSS
/* http://css-tricks.com/perfect-full-page-background-image/ */
/* html {
background: url(http://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;
}
.contentbox {
/*position: absolute;*/
bottom: -22em;
}
/*This is very hacky - why aren't all the contentboxes the same?*/
#thedate div.contentbox {
bottom: -30em;
}
#annoucement {
background: url(http://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;
...
JavaScript
$('section').css('height', innerHeight);