CSS Syntax Quesiton: Creating an overlay with text?

I have this image set as the background to a div:


and I can add a CSS overlay, which works:


the problem is, that when I do this overlay, I have to use height:100% to get it to cover the entire background cover image. When I do that, it pushes the text down past the image.

It should look like this (from Photoshop):


But that text appears below the image + overlay.

This seems like a simple syntax problem. What am I missing here?

Relevant HTML:

			<div id="automation" >
				<div id="overlay"></div>
				<h1 class="copy">Discover How to Turn your "Never Quite Up-To-Date" Company Spreadsheets into an Automatic, Access-From-Anywhere, Always Current System.</h1>
			</div>

Select allOpen in new window

Relevant CSS:

	#automation {
		background-image: url('/img/her-spreadsheet.jpg');
		height: 427px;
		background-size: cover;
		background-position: center center;
		position:relative;
	}

	#automation img {
		width:100%;
		display:block;
	}

	#overlay {
		position: relative;
		top:0px;
		width:100%;
		height:100%;
		background:#0054a6;
		opacity: 0.4;
		color:0054a6;
	}

	.copy {
		position: absolute;
		padding-left:275px;
		font-size: 36px;
		color:white;
		text-shadow: 1px 1px #000000;
		opacity: 1.0;
	}

Select allOpen in new window