Using a non-repeating background image in a div on mobile

Have a mobile specific page made with one div with a background image and a form within it laying over the top of the background image. The image has to show full width but also the correct height. The image is 640px width and 615px height. I need it to look good on retina and non-retina screens. I cannot get this to work. I have placed the code below. I added the head code in the html doc so that wasn't questioned. Thanks in advanced!

CSS

#order1 {
	background-image: url(images/background.png);
	background-repeat: no-repeat;
	width:320px;
	height:615px;
 
}

HTML

Syndicate content