<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="canvas row" id="digitalcanvas"> <div class="col-lg-12 fadeIn" id="splash"> <div id="mediacontent" class="col-lg-12"> <div class="col-lg-6"> <h1>Menu</h1> <ul> <li>Food 1 </li> <li>Food 2 </li> <li>Food 2 </li> </ul> </div> <div class="col-lg-6"></div> </div> <!-- Instagram Template--> <div id="debug" class="col-lg-12"></div> </div> </div>

body { font-family: 'Roboto', sans-serif; color: #FFFFFF; background-color: #000000; border: 0; padding:0; margin: 0; height: 100vh; width: 100vw; overflow: hidden !important; } .canvas{ height: 100vh; width: 100vw; text-align: left; border: 0 solid silver; display: table-cell; vertical-align:text-top; padding:0; margin: 0; } #splash{ background-image: url('../assets/images/background.png'); background-repeat: no-repeat; background-attachment:fixed; background-position: center; position: fixed; width: 100vw; height: 100vh; z-index: -1; visibility: hidden; } #debug{ width: 900px; height: 100vh; z-index: 999; display: block; /*margin-top: 90vh;*/ } #debug p{ font-size: 18px; }