How to put title & description on TOP of header image?

When you say “title and description display on top of the header”, do you mean that the title and description display with the header image behind them?

When you say “title and description display on top of the header”, do you mean that the title and description display with the header image behind them?

Yep!

This should get you started…

@media screen and (min-width: 61.5625em) {
	.site-header {
		padding: .25em 4.5455%;
	}
	.site-branding {
		position:absolute;
		top: 1.75em;
		left: 4.75em;
	}
}

If you’ve set a primary menu, you’ll also need the navigation and menu adjustments I’ve added below.

@media screen and (min-width: 61.5625em) {
	.site-header {
		padding: .25em 4.5455%;
	}
	.site-branding {
		position:absolute;
		top: 1.75em;
		left: 4.75em;
		z-index: 1;
	}
	.site-header-menu {
		position:absolute;
		top: -2em;
		left: 4.75em;
		z-index: 1;
	}
	.main-navigation {
		margin: 0 -0.875em;
	}
}

Very cool! Will try it out eventually and update my results. Still somewhat a novice that I am, I noticed in a previous css attempt that it displayed the menu on top of other items. I’ll give this a shot!