How to link Body/Html Backgrounds with CSS in Ipad/Iphone (safari)

I'm configuring my 404 page.

In this page I only put a "COVER" background using:

html { 
  background: url(../img/404.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  overflow: hidden;
}

no problem.. The 404.jpg image cover all screen in IE, Edge, Chrome and IPAD/IPHONE Safari.

But.. because this is a 404 page - I put a message: "CLICK HERE TO RETURN HOME."

and create a "Clickable Background" with this:

html #background-link {
position: absolute;
height:11000px;
text-indent:-9999px;
width:1440px;
top: 0; left: 0;
border: 0;
float: left;
}

Works fine on IE, Edge, Chrome..

but.. on IPAD/IPHONE Safari - the background image appears bigger, maybe with 100% of its original size - and not as a cover (as Works without the second css code).

but the "link" Works fine.

The only problem is the cover image - in my case, on IE/EDGE/CHROME I see a Man in front a blue screen background. on IPAD/IPHONE I see only a blue screen background - in this case, the top left corner.. not the image as a cover screen.

Solution

This is because of the dimensions you're providing for the #background-link selector; they're bigger than the screen size of the device you're viewing on, forcing the size of the page to grow to accommodate them.

One solution is, instead of providing explicit sizes, to provide values for all four positioning properties, like so:

#background-link{
    border:0;
    bottom:0;
    left:0;
    position:absolute;
    right:0;
    text-indent:-9999px;
    top:0;
}

Note: as per Daniel's comment below, the overflow:hidden declaration on the html tag will also need to be removed in order for this solution to function correctly.