Background does not take the cover size bootstrap 4 - css

Question

So i am making a basic website.
Everything works fine when i open it on the desktop, but when i open it on my iphone, the background image of the body, does not "cover" the container.
What am i doing wrong here ? (i added the background-attachment: scroll on mobile devices after reading solutions on stackoverflow but did not work).
Here is an image of what is happening :
This is how it looks on desktop :
This is how it looks on mobile.
Here is my css :
#font-face {
font-family: rubikCustom;
src: url(Rubik-Regular.ttf);
}
html, body {
height: 100%;
width: 100%;
min-height: 100%;
}
.navbar {
background-color: #FFF;
}
.navbar-nav > li{
margin-left: 15px;
margin-right: 15px;
}
#home {
background: url(home_back_blur.png) no-repeat center center fixed;
display: table;
height: 100%;
min-height: 100%;
position: relative;
width: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* background-attachment:scroll */
#media only screen and (max-width: 480px) {
#home {
background-attachment:scroll;
}
}
#full-height-cont {
height: 100%;
width: 100%;
}
.landing-text {
display: table-cell;
text-align: center;
vertical-align: middle;
color: white;
font-family: rubikCustom;
}

Answer 1

background-size: cover means that the background will always grow to "cover" the entire div.
on desktop, your div is landscape orientation (the width is longer than the height). on mobile, it happens to be portrait orientation (the width is shorter than the height). you can verify this by adding something like border: 1px solid red to #home.
there are two possible solutions: at mobile sizes change the element's height, or change the background-size property