Gradient background for header and first section

Hi there,

you would need to use some CSS e.g to add one to Site Header:

.site-header {
    background: linear-gradient(to right, red, blue);
}

Any Section / Div just needs to be given a custom CSS class, which you would target insed of the site-header.

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

Stripe uses Negative margins to shift the 'page content' up over the hero.
So you could do something similar to that by adding a the gradient to the hero and adding neg margins to #page element.