How to set body background image as cover for ios devices - css

Question

I have a div with background image and i set background-size:cover to make full width and height background image. but its not working in ios devices how can i set it for ios devices please help me
thanks

Answer 1

It should be background-size: cover; and not background-image. Also, you should be using browser prefixes as the property was released under CSS3 Specification1..
body {
background-image: url(#);
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
1. Browser Support

Answer 2

edit - Updated Fiddle
I had a similar problem. I got my solution by setting a scroll attribute for background. Also be sure to set the parent container to 100% height and width. AdrianS has the right point for aiming at html to set 100% height and 100% width.
In the following code, I have a header class for the background image. Adapt it as you need.
Check out a fiddle at http://jsfiddle.net/Bavc_Am/7L3gD/5/
Upvote if helpful please, I'm new here.
html,
body {
height: 100%;
width: 100%;
}
/* Full Page Image Header Area */
.header {
display: table;
height: 100%;
width: 100%;
position: relative;
background: url(http://placehold.it/800x800.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
/* Responsive */
#media (max-width: 768px) {
.header {
background: url(http://placehold.it/800x800.png) no-repeat center center scroll;
}
}

Answer 3

User mkubilayk posted the solution the really worked for me here. The lifesaver whas the property below:
background-attachment: scroll;
Quoting:
I have had a similar issue recently and realised that it's not due to
background-size:cover but background-attachment:fixed.
I solved the issue by using a media query for iPhone and setting
background-attachment property to scroll.
.cover {
background-size: cover;
background-attachment: fixed;
background-position: center center;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
} }

Answer 4

The solution I will provide can be seen here. But with a minor change. This method is tested many times and for IE it has IE8+ support. You can see the full browser support in the link that I provided.
html {
width: 100%;
height: 100%;
}
body {
background: #Fallback-color;
background: url(../images/image.jpg) center top no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/image.jpg', sizingMethod='scale')";
height: 100%;
}