Q: First slide of parallax scrolling ALWAYS Full screen Product is not finished yet. :D
I'm making a parallax website for myself. Currently I have 3 sliders (home, about and contact). I would like to have the first Slide (home section) always be full screen, no matter what resolution or any kind of zooming you have.
The only way for me to accomplish this right now, is giving a height in pixels to the first slider (home). Ofcouse this wont be a full screen on some one else his screen (other resolutions). I dont really mind the other sliders heights, I just want the first slider (home) to be always fullscreen on any resolution.
Right now my home slider in the CSS has a height of 100%, so my home slider is not that big (in height), because my content in it is not much at the moment.
See the code below for what I have at the moment. HTML and CSS code. Dont mind the element tags, still needs some cleaning. :D
Anyone has a solution for this? Thanks!


* {
  margin: 0 auto;
  padding: 0;
}
body,
html {
  height: 100%;
  background: #000000;
}
body {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  letter-spacing: 1px;
  height: 100%;
}
/* ==========================================================================
Parallax Scroll
========================================================================== */

/* Slide 1 */

#home {
  background: #000000 no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: table;
}
/* Slide 2 */

#about {
  background: #ffffff no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: table;
}
#contact {
  background: #ffffff no-repeat center center fixed;
  position: relative;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
  width: 100%;
  display: table;
}
/* ==========================================================================
Sections CSS
========================================================================== */

/*.loading 
{
background: url('../img/ico_loading.gif') no-repeat center center;
}

section 
{
opacity: 1;
}

.loaded section 
{
opacity: 1;
-webkit-transition: opacity 300ms ease-out;
-moz-transition: opacity 300ms ease-out;
-o-transition: opacity 300ms ease-out;;
transition: opacity 300ms ease-out;
}*/

#brand i {
  color: #8f1c35;
  font-style: normal;
  text-transform: uppercase;
  font-weight: bold;
}
#brand {
  text-transform: uppercase;
  font-size: 25px;
  color: white;
  display: inline-block;
}
.center-table {
  display: table;
  margin-top: 50px;
}
.center-tablecell {
  display: table-cell;
  vertical-align: middle;
}
.row-centered {
  text-align: center;
}
.col-centered {
  display: inline-block;
  float: none;
  margin-top: 6px;
}
#text1 {
  margin-top: 50px;
}
#text1 h1 {
  font-size: 50px;
  color: #a21838;
  display: inline;
  text-transform: uppercase;
}
#text2 h1 {
  font-size: 50px;
  color: #a21838;
  display: inline;
  text-transform: uppercase;
}
#text3 h1 {
  font-size: 50px;
  color: #a21838;
  display: inline;
  text-transform: uppercase;
}
#contactme .info {
  color: #000000;
  font-size: 21px;
}
#contactme .email {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
}
#contactme .social-media {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
  ;
}
#aboutme .study {
  color: #000000;
  font-size: 21px;
}
#aboutme .me {
  color: black;
}
#aboutme .projects {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
}
#name #student {
  text-align: center;
}
#name h1 {
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 64px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 3px;
  margin-bottom: 10px;
  margin-top: -10px;
}
#student h2 {
  margin-top: 75px;
  font-family: 'Lato', Helvetica, Arial, sans-serif;
  font-size: 21px;
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 3px;
  text-transform: uppercase;
}
#container-edu {
  margin-top: 100px;
  margin-bottom: 100px;
}
#container-edu .edu {
  color: #a21838;
  font-size: 25px;
  font-family: 'Josefin Slab', serif;
  font-weight: bold;
}
hr {
  color: #000000;
  background-color: #000000;
  height: 1px;
  width: 75%;
}
/* ==========================================================================
Animations Navbar CSS
========================================================================== */

/* ==========================================================================
Bootstrap Navbar CSS
========================================================================== */

.navbar-default {
  background-color: #000000;
  font-size: 14px;
  border-bottom: 4px solid #8f1c35;
}
.navbar-default .navbar-brand {
  color: #ffffff;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
  color: #ffffff;
}
.navbar-default .navbar-text {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  font-weight: bold;
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
  color: #ffffff;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
  color: #ffffff;
  background-color: #8f1c35;
}
.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
  color: #ffffff;
  background-color: #8f1c35;
}
.navbar-default .navbar-toggle {
  border-color: #8f1c35;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: #8f1c35;
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: #ffffff;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  border-color: #ffffff;
  text-align: left;
}
.navbar-default .navbar-link {
  color: #ffffff;
}
.navbar-default .navbar-link:hover {
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a:hover,
.nav > li > a:focus {
  text-decoration: none;
  background-color: #8f1c35;
}
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu > li > a {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #ffffff;
  }
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover,
  .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus {
    color: #ffffff;
    background-color: #8f1c35;
  }
}
/* ==========================================================================
Non Mobile First
========================================================================== */

/* Large Devices, Wide Screens */

@media only screen and (max-width: 1200px) {}
/* Medium Devices, Desktops */

@media only screen and (max-width: 992px) {}
/* Small Devices, Tablets || IS VAN 250% EN HOGER ZOOM! */

@media only screen and (max-width: 768px) {
  #name h1 {
    font-size:42px;
  }
  #student h2 {
    font-size: 13px;
  }
  #text1 h1 {
    font-size: 27px;
  }
  #aboutme .study {
    font-size: 13px;
  }
  #text2 h1 {
    font-size: 27px;
  }
  #contactme .info {
    font-size: 13px;
  }
  #text3 h1 {
    font-size: 27px;
  }
}
/* Extra Small Devices, Phones */

@media only screen and (max-width: 480px) {
  #name h1 {
    font-size: 34px;
  }
}
/* Custom, iPhone Retina */

@media only screen and (max-width: 479px) {}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<body data-spy="scroll" data-target=".navbar-sectionScroll" data-offset="230">
  <nav id="myNavbar" class="navbar navbar-default navbar-inverse navbar-fixed-top navbar-sectionScroll" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" id="brand" href="#home">FirstName <i>LastName</i></a>
      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="#home">HOME</a>
          </li>
          <li><a href="#about">ABOUT</a>
          </li>
          <li><a href="#contact">CONTACT</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>


  <section id="home">
    <div class="container center-table">
      <div class="row text-center center-tablecell">
        <div id="student">
          <h2>Student Software Developer</h2>
        </div>
        <div id="name">
          <h1>Name</h1>
        </div>
      </div>
    </div>
  </section>


  <section id="about">
    <div class="container center-table">
      <div class="row text-center center-tablecell">
        <div id="aboutme">
          <div id="text1">
            <h1>ABOUT</h1>&nbsp;
            <h1 class="me">ME</h1>
            <hr>
          </div>
          <p class="study">My name is LoremIpsum.
            <br/>I am currently studying as a Software Developer at the Hogeschool Stenden in Emmen.</p>
          <br>
          <br>
          <br>
          <p class="projects">Projects</p>
        </div>

        <div id="container-projects">
          <div class="row row-centered">
            <div class="col-xs-6 col-sm-4 col-centered" style="background: black; height: 200px; width: 300px;"></div>
            <div class="col-xs-6 col-sm-4 col-centered" style="background: black; height: 200px; width: 300px;"></div>
            <div class="col-xs-6 col-sm-4 col-centered" style="background: black; height: 200px; width: 300px;"></div>
          </div>
        </div>

        <div id="container-edu">
          <p class="edu">Education</p>
        </div>
      </div>
    </div>
  </section>


  <section id="contact">
    <div class="container center-table">
      <div class="row text-center center-tablecell">
        <div id="contactme">
          <div id="text2">
            <h1>CONTACT</h1>
            <hr>
          </div>
          <p class="info">If you would like to make any contact, please see below for more information.</p>
          <br/>
          <br/>
          <br/>
          <p class="email">Send an Email</p>
          <br>
          <br>
          <br>

          <div id="social">
            <p class="social-media">Social Media</p>
          </div>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
        </div>
      </div>
    </div>
  </section>


