I'm working with a site witch contains a large image in a dev. The dev has a border-radius,
In Firefox, Chrome en Safari it's workes perfectly. I haven't test it in IE.
I have a problem with iOS safari and Chrome.
In all desktop browsers the site fills the window and is centrered. In iOS the site is very little and alligned to the left. Has anybody any idea how to solve this problem.

The CSS code

body {
background-color: #f8f8f4;
position: relative;
}

.container {
left: 50%;
position: absolute;
}

.container1 {
height: 3036px;
width: 2180px;
position: relative;
left: -50%;
}

.container2 {
height: 1200px;
width: 974px;
position: relative;
left: -50%;
}

.container3 {
height: 650px;
width: 874px;
position: relative;
left: -50%;
background-color: #c2e3be;
}

.container4 {
width: 500px;
height: 1475px;
position: relative;
left: -50%;
top: -625px;
background-color: #fdfdd1;
}

.achtergrond {
height: 3036px;
width: 2180px;
position: relative;
overflow: hidden;
border-radius: 1090px/1518px;
top: -2351px;
background-image: link to image of 2000 x 1008 px (link is not allowed) ;
background-attachment: fixed;
background-position: center bottom;
background-repeat: no-repeat;
background-color: transparent;
background-position: 0 -5px;
}

.achtergrond_boven {
position: absolute;
height: 1200px;
width: 974px;
overflow: hidden;
-ms-filter: "progidXImageTransform.Microsoft.Alpha(Opacity=90)";
filter: alpha(opacity=90);
opacity: 0.9;
background-color: #2e0600;
}


The HTML=code

<div class="container">
<div class="container1">
<div id="achtergrond" class="achtergrond">
</div>
</div>
</div>
<div class="container">
<div class="container2">
<div class="achtergrond_boven">
</div>
</div>
</div>
<div class="container">
<div class="container3">
</div>
</div>
<div class="container">
<div class="container4">
</div>
</div>
</body>
</html>