How to figure out the right size background image for iPhone

How to figure out the right size background image for iPhone

I am working with media queries to create screen breaks, in order to have
a website optimized on both the desktop and mobile. Currently, when I
bring the site up with its current css the background pictures are
stretched out of proportion. (The current background sizes are: 640px x
960px.)
Here is the current css:
@media only screen and (-webkit-min-device-pixel-ratio : 2), only screen
and (min-device- pixel-ratio : 2) {
#home{width: 980px;
height: 1090px;
background-image: url(../images/landingPageRetina.jpg) 50% 0
no-repeat;
background-size: 100% 100%;}
#about{background-image: url(../images/aboutMobile.png) 50% 0 no-repeat;}
#music{background-image: url(../images/musicMobile.jpg) 50% 0
no-repeat;}
#videos{background-size: url(..images/videosMobile.jpg)50% 0 no-repeat;}
#connect{background-image: url(..images/connectMobile.jpg)50% 0
no-repeat ;}
#contact{background-image: url(../images/contactMobile.jpg)50% 0
no-repeat ;}
}
Does anyone have any suggestions on what the correct sizes are - so that
the images will render proportionally?