html - CSS background images resizing incorrectly on iPad and iPhone.

Question

My site's background image is resizing nicely in Chrome and Safari using background-size: cover, but when I go to test my website on an ipad or iphone, the CSS background image is really zoomed in and looks horrible. I've read lots of other questions on here relating to this and none have solved my problem.

HTML

<div class="background"> 

</div><!--background-->

.background has no container and is 100% width of the screen.

CSS

.background {
    height:600px;
    width:100%;
    position:relative;
    background: url(css/img/strand.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

Answer 1

I had the same issue, I used SCROLL instead of FIXED.

background-attachment:scroll;