Help with background image on iPhones

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

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;

      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?


It looks ok on the mac iphone6 simualtor (which is 99% accurate) and looks ok on a real iphone 4.

However, just to be sure you should remove the image from the body and just let everyone have the fixed image. There’s no need to supply both.

For the fixed element do not give it a magic number height but just use top:0;bottom:0;left:0;right:0; to describe the dimensions.

You don;t actually need an extra element anyway if all you are supporting is IE8 plus and you can use the after: element as in this codepen.

Thanks Paul. I made those changes, but Now there is a black at the bottom on the iPhone 6 plus. On the iPhone 5s i noticed that while you scroll down in black appears and then disappears.

Any ideas?

Thanks Again,


here is the simulator I’ve been using to test with:


This is the bounce that you get on ios (and on my imac) when you scroll to the bottom or the top of the page there is a bounce effect where the background of the body shows and then slides back. It’s supposed to be a feature but does mess with some designs.

There is a js fix for it.= if it worries you but it generally happens on all sites and is there to provide feedback that you have reached the end of the scroll.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.