Twenty twelve customization – wrap not resizing

Created child theme based on twenty twelve. I’ve added a ‘wrap’ just before the ‘page’, and set its width to 100%, min-width at auto and height to 98% and min-height to auto, max-height to 98%. The wrap width and height resizes as expected on the pages and blog–except on the static front page. Here the ‘wrap’ width resizes, but the height is not resizing in proportion to the body element.

For the static front page, I’ve inserted a background image into the ‘wrap’. Size is 1024px x 713px, and I set background-size to cover. Nevertheless, the image is cropped in the browser view, and the ‘wrap’ height on my monitor (iMac 27in) is only 484px, even when the page is stretched to full view.

In header.php, added tag <div id=”wrap”> to header, immediately above <div id=”page”>.
In footer.php, moved closing tag </div><!– #page –> above <div id=”colophon”>, and put closing tag </div><!– #wrap — > below it.

All appears to be well with the html.

In the CSS I had to set up two declarations, one to apply globally, and the other to apply in the instance of the static front page.

body #wrap {
	width: 100%;
	height: 98%;
	min-height: auto;
	max-height: 98%;
	margin: 0;
    padding-bottom: 0;
    background-color: green; /* just to easily identify the 'wrap' container in the layout */
}

For the static front page, this is the css declaration:

body.home #wrap {
	background: #000 url('https://website.dev/wp-content/uploads/2014/09/home-bgx980.jpg') no-repeat center center fixed;

	/* lt ie8 */
	-ms-background-position-x: center;
	-ms-background-position-y: center;

	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	margin: auto;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	border: 0;
	width: 100%;
	min-width: auto;
	height: 98%;
	min-height: auto;
	max-height: 98%;
}

@media only all and (max-width: 1024px) and (max-height: 768px) { /* Important: 1024x768px has the same ratio as 1280x960px */

			body.home #wrap {
					-moz-background-size: 1024px 768px;
					background-size: 1024px 768px;
				}
}

Please can anyone point out the error or suggest a solution?

The website is local right now, so can’t give you a URL. : (

FYI, originally I put the background image in the body, but on resizing, the lower part of the image is lost, so I thought to put it into the wrap, and set the wrap so that the height is 98% of the body. But it’s not working for me! Help?