Fixed Background-image jumps after zooming on mobile - html

Question

I tried so much! But I think my problem is a little more special than the other solved questions:
Here is the side:
fruehstarter.com
I have a problem with the background on mobile devices.
My client wanted a special background, it's fixed with 100% width and height. On a mobile device you need to zoom in to identify the content.
But if you scroll down and the browser line disappears, the background-image jumps because of the new height.
Either I have the jumping background or I have a white border at the end of the side with the height of the browser line.
Hope you understand my problem and can help me. Thanks a lot!
EDIT: What I've tried:
background:cover not scaling on mobile browsers
Background image jumps when address bar hides iOS/Android/Mobile Chrome
And I've tried to give my div ".bg" and ".container-fluid" another positions (changed to "absolute" and "relative") or give another div the background.
EDIT 2nd:
Here is the CODE: jsfiddl
HTML:
<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;
}
body {
-webkit-overflow-scrolling: touch;
min-height: 100%;
width: 100%;
position: relative;
}
.container-fluid {
height: 100%;
overflow-x: hidden;
position: absolute;
width: 100%;
}
.row {
height: 100%;
position: relative;
}
.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);
}
}

Answer 1

It would be helpful to share your code.
I think
background-attachment: fixed;
in addition is what your are looking for.
Example:
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
Update
Try this:
body {
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-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
}
I think defining background inside the body, in your case, is more comfortable.