You need to precise the following.
There is the grey header image between the green one at the top and the people one, so wen you say between these two, you need to say if it is above or below the grey bar
Will this new image be different from page to page or is it the same one for the whole site.
In any case, instead of using a single widget in the header widget area and extending the widget area background, you could use two text widgets in the header widget area, and extend the widgets background.
The current text widget holding the current people image has the ID #text-3, let us say you add a new text widget in the Header widget area and it turns out to be #text-4, the CSS to extend the widget background would be.
.is-desktop #header-widget-area, .is-desktop #text-3, .is-desktop #text-4 {
position: relative;
overflow:visible;
}
.is-desktop #text-3:before {
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid #595A5B;
box-shadow: 9999px 0 0 #595A5B;
z-index:-1;
}
.is-desktop #text-4:before {
content: “”;
position: absolute;
top: 0;
bottom: 0;
left: -9999px;
right: 0;
border-left: 9999px solid red;
box-shadow: 9999px 0 0 red;
z-index:-1;
}
.is-desktop #branding {z-index:auto;}