So, the idea here is to make a gradient background that extends from the top of header (left corner) to the bottom of section 1, something similar to what you see at http://www.stripe.com. I can’t see how your proposal will provide the desired results and there is no ‘outer container’ extending the both of them, that is, ensuring “one” gradient background as background for both the header and section 1 (visually as one HERO background, container). Any other solutions?
Sincerely