I’m having problems with how the background image is presented on iPhone 6 plus (414×736). There is a line showing across the bottom.
Here is a screenshot
http://joinroot.com/screen.PNG
Here is the css media query for it:
/* Landscape phone to portrait tablet */
@media only screen and (min-width: 568px) and (max-width: 767px) {
.page-bg {
position: fixed;
top: 0;
right: 0;
left: 0;
height: 1707px;
background-image: url('root_background-landscape3.jpg') ;
background-position: top left;
background-repeat: no-repeat;
z-index: -1;
}
}
/* portrait phones and down */
@media (max-width: 567px) {
body {
background: url(assets/images/root_background.jpg) no-repeat center top fixed;
/*background-position: 50% top ;*/
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#main-content .feature-text h1{
font-size: 36px !important;
}
#main-content .feature-text p{
font-size: 24px !important;
}
#message{
padding-top:5px;
margin-top: 0px;
}
}
I read that for iPhones I needed to create a new background for a div rather than for the body so thats why I have a background rule for page-bg and for body
Here is a link to the site:
Any ideas?