Extending background of header image to viewport edge

Replies: 0

Hello everyone,

I’m trying to customize the Twenty Sixteen theme; my goal is to give a background color to the header-image div and have this background color extend to the horizontal edges of the viewport like a banner.

I’ve created a child theme, twentysixteen-child, with the following files in addition to the standard functions.php:

header.php:
* Added a parent <div class=”header-image-container”> right before <div class=”header-image”> (Line 91), closing </div> right after <!– .header-image –> (Line 95)

style.css:

.header-image-container {
	width: 500%;
	margin-left: -200%;
	background-color: #153874;
}

.header-image {
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
	width: 100%;
}

.site {
	overflow: hidden;
}

This worked great! EXCEPT, the header image is no longer responsive – the large image displays regardless of viewport size. Could someone help me fix this?

Site: https://www.mamcoaana.org
Twenty Sixteen version: 1.3

Thanks!

Nick