Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

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

0
DrDamnit
Asked:
DrDamnit
1 Solution
 
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
 
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

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now