Full background image scales up poorly on iPhone 5 - html

Question

I have a one page website that displays background images in several divs. I used background-attachment: fixed to give it a pseudo parallax scrolling effect.
It works perfectly on the desktop. I now know that this doesn't work on the iPhone, so I removed this code from the iPhone version using a media query. (I can live with a fallback.) On the iPhone 5, the background images scale up to an unrecognizable view — so big that it is just pixels.
How can I resize the images so that they fit the phone's browser window? I have looked everywhere for an answer.
I removed all media queries. I even removed the background-attachment: fixed property to no avail. Here's a link to where the site is: http://www.mywebdesignstudio.net/danielleb_KKC (I put back the background-attachment: fixed) If you look at it on an iPhone 5, the photos are too big. This works on the desktop, laptop, and tablet, but not on the phone--hence the media queries to swap out the photo to see if it would work. Feel free to look at the page source for the entire code.
Here's the CSS code:
#viewport{
zoom: 1.0;
width: device-width;
}
body, html {
height: 100%;
margin: 0;
font: 1em/1.8 "Arial", sans-serif;
color: #777;
}
.bgimg-1, .bgimg-2 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bgimg-1 {
background-image: url("pic4ghost.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radio.png");
min-height: 550px;
}
#media only screen and (max-width: 767px){
.bgimg-1 {
background-image: url("pic4ghostMOBILE.png");
min-height: 100%;
}
.bgimg-2 {
background-image: url("radioMOBILE.png");
min-height: 400px;
}
}
#media only screen and (min-device-width: 320px) and (max-device-width: 480px){
.bgimg-1, .bgimg-2 {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.bgimg-1 {
background-image: url("pic4ghostsmartphone.png");
}
.bgimg-2 {
background-image: url("radiosmartphone.png");
}

Answer 1

use this and delete all other codes
.bgimg-1 {
background:url("pic4ghost.png") no-repeat center center fixed;
background-size:cover;
}
delete all other classes and media queries

Answer 2

Have you tried using the background-size: property?
Here is a code example. Please notice the first declared background will be on top of the rest.
// Gradient, image and flat color as a fallback;
.bgimg-1 {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)), url("paper.gif"), black;
background-size: auto, cover, auto;
}
I used the standard syntax, because CSS3 is common practice on this days, If you have some need for backwards compatibility, check [caniuse.com]