CSS Syntax Quesiton: Creating an overlay with text?

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

base image
and I can add a CSS overlay, which works:

overlay
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):

final
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>

Open 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;
	}

Open in new window

LVL 32
DrDamnitAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Robert SchuttSoftware EngineerCommented:
change the css slightly:
	#overlay {
		position: absolute;

Open in new window

Both #overlay and .copy will then be positioned 'absolutely' inside the relatively positioned container.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
DrDamnitAuthor Commented:
I swear I tried that... but you know how it is... you try one thing, then another, then another, and then you get all turned around and don't see the simple solutions!

Thanks so much!
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.