Hi there,
You’re right that you’ll want to use GP Hooks. However you’ll want the “After Header” hook.
To get your content to look like that, you’ll need some custom HTML and CSS.
For example:
<div class="main-feature-area">
<div class="grid-container grid-parent">
<div class="grid-50">
Your left side column HTML in here
</div>
<div class="grid-50">
Your right side column HTML in here
</div>
</div>
</div>
Then you would add your background image to the area using CSS:
.main-feature-area {
background-image: url('URL TO YOUR BACKGROUND IMAGE');
background-repeat: no-repeat;
background-size: cover;
}
Depending on the size and aspect ratios of your image and feature area, the whole image might not show – this is unfortunately just the way background images work in HTML.
Hopefully this is enough to get you going π