JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<div class="container-fluid">
  <div class="bg"></div> 
     <div class="row">
       <div class="linkbox"></div>
    </div>
</div>

CSS

html {
    font-size: 10vh;
    height: 100%;
    font-family: 'Titillium Web', sans-serif;
}

.row {
    height: 100%;
    position: relative;
}

body {
    -webkit-overflow-scrolling: touch;
    min-height: 100%;
    width: 100%;
    position: relative;
}

.container-fluid {
    height: 100%;
    overflow-x: hidden;
        position: absolute;
        width: 100%;
}

.bg {
    overflow: hidden; 
    position: fixed; 
    width: 100%;
    height: auto;
    min-height: 10rem;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: -15px;
    margin-right: -15px;
    z-index: -1; 

    background: url('http://fruehstarter.com/wp-content/themes/fruehstarter/library/images/fs_klingelschildMobil6.jpg') no-repeat;
    background-size: cover;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    -o-background-size:cover;
    background-position: center center;
    background-attachment: fixed;
}

JavaScript

jQuery(document).ready(function () {
if (navigator.userAgent.match(/(iPad|iPhone|iPod|Android)/g)) {
        $('html').css('font-size', Math.ceil($(window).height() / 10));
        $('.bg').css('overflow-y', 'scroll');
        $('body').scrollTop(1);
    }
}