Header image placement on IOS - html

Question

My header image on my website (dorinart.com) is perfectly positioned in all browsers including android mobile browsers but when I open it on IOS (iphone, ipad) it only shows the top right corner of the image (you can check if you open dorinart.com). How could I resolve this issue?
my css looks like this:
.header{
background: url('../img/banner5.jpg');
background-repeat: no-repeat;
position: fixed;
background-size: cover;
min-height: 730px;
position: relative;
}

Answer 1

Can you try this CSS? I think you want to center the image in the space available right? Please let me know if this works:
.header{
background-image: url('../img/banner5.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position-x: center;
min-height: 760px;
position: relative;
}
If you don't want it centered, then just remove the background-position-x property.
Hope this helps. Thanks.
Update: Attached screenshot from simulator:

Answer 2

I have had a similar issue recently and realised that it's due to background-size:cover with background-attachment:fixed.
In your website its like this:
background: url('../img/banner5.jpg') no-repeat fixed;
background-size: cover;
min-height: 760px;
position: relative;
Here the background-attachment:fixed is the problem.
I solved the issue by using a media query for iPhone and setting background-attachment property to scroll.
So what you can do is use this:
.header{
background-size: cover;
background-attachment: fixed;
#media (max-width: #iphone-screen) {
background-attachment: scroll;
}
}