Link to home
Create AccountLog in
Avatar of DrDamnit
DrDamnitFlag for United States of America

asked on

CSS Syntax Quesiton: Creating an overlay with text?

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

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

User generated image
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):

User generated image
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

ASKER CERTIFIED SOLUTION
Avatar of Robert Schutt
Robert Schutt
Flag of Netherlands image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
Avatar of DrDamnit

ASKER

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!