What is the best way to structure a background image, an overlay, and text while still being responsive?

I'm currently trying to create a page header for a site. I want it to be (from bottom to top) a background photo, a mid-opacity gradient overlay, and the page title. This is how it's structured so far:

The HTML:

<div class="banner" style="background-image: url(#backgroundImagePath#); background-position: center center;">
	<div class="banner-overlay"></div>
		<div class="banner-page-title">
			<h1>#$.content('title')#</h1>
		</div>
	</div>
</div>

Open in new window


THE CSS (or the LESS, more accurately):

.banner { min-height: 275px; position: relative; }

.banner-overlay {
	/* all the gradient code, trimmed for legibility*/
	height: 100%;
	position: absolute;
	width: 100%;
	z-index: 5; }

.banner-page-title { border: 3px solid #fff; color: #fff; left: calc(50% - 25%); margin: 3em auto; padding: 3em; position:absolute; text-transform: uppercase; z-index: 10; 
	
	h1 { font-family: @font-family-sans-serif; font-size: 2em; font-weight: 800; letter-spacing: .1em; }
	
}

Open in new window


The problem I'm having is that I don't want the .banner height to be a set height; I just want it to encompass the .banner-page-title, but positioning the title absolutely (which I need to do to place it over the image and gradient) takes it out of the flow so the .banner has no idea how tall it is.

Is there a better way to do this with CSS, or do we need to break into jQuery? (Which then leads to the obvious question of "How?" I figure it'll involve outerHeight(true) somewhere.)

Thanks for taking a look!
SiobhanElaraAsked:
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.

David S.Commented:
You don't have to absolutely position both ".banner-overlay" and ".banner-page-title". You can just give "position:relative" to ".banner-page-title" and it will sit above ".banner-overlay" because you gave it a higher z-index. Although you don't necessarily need to set a z-index on either. (Elements later in the document will automatically have a higher computed z-index if you don't set it expressly.)

If you didn't need to set the background image inline like that, you could apply it and the gradient to the same element. Alternatively, you could use a pseudo-element instead of ".banner-overlay", like this:
.banner:before {
	/* all the gradient code, trimmed for legibility*/
	content: '\a0';
	height: 100%;
	position: absolute;
	width: 100%;}

Open in new window

P.S. You seem to have an extra </div> end tag in your code.
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
SiobhanElaraAuthor Commented:
Perfect, thank you 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.