Background image on Ipad do not display 100% - ios

Question

The image that I use for my background (which is fixed) displays at 100% in Web format, but when I emulate it on Ipad (1024x768), the image stops adapting to the width of the screen and it just fills about 70% of the screen height.
This is the CSS that I've used for the website format:
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
width: 100%;
}
This is the CSS that I've used for the Ipad style:
#media screen and (max-width: 1024px) {
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 100% auto;
height: 5700px;
min-width: 1024px;
}
}
I've tried min-width: 1024px; beacause I found a similar question with that suggestion, but it hasn't worked.

Answer 1

As stated here viewport units caniuse , using viewport units can ( and will ) cause problems in iOS because
iOS 7 Safari recalculates widths set in vh as vw, and heights set in vw as vh, when orientation changes.
iOS 7 Safari sets viewport unit values to 0 if the page has been left and is returned to after 60 seconds.
vh on iOS is reported to include the height of the bottom toolbar in the height calculation, and the width of the sidebar (bookmarks) in the vw width calculation.
So i suggest you use media queries and target different iOS resolution both for portrait and landscape. I know, it's a meticulous task but if you have a serious project for a serious customer , you have to deliver serious product
See here > iosres
For example
/* iPad with portrait orientation.*/
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait){
.body{
height: 1024px;
}
}
/*iPad with landscape orientation.*/
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape){
.body{
height: 768px;
}
}
/*iPhone 5 with aspect ratio*/
#media screen and (device-aspect-ratio: 40/71) {
.body {
height: 500px;
}
}
or you could use jQuery or javascript , for example
$(".body").height($(window).height())
this will equal body height to window height

Answer 2

Try using width: 100vw. vw means viewport width, so this should make the background take up the full width of the viewport.

Answer 3

Thanks to #Traver I've found the answer:
.body{
background-image: url("/img/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: 200vh;
height: 5700px;
width: 100%;
}
I just had to change the background-size units to vh and remove auto (but I've tested with it too and it's worked). Giving it a number of 200vh is enough to scale it full width and height.
EDIT: Mihai T's answer is the best one. Check it.