Gradient background for header and first section

[Abraham]

Hi

How do you add a gradient background that extends the header and section 1 of any site, that is both with a pure css solution and with a background-image (png) solution?

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Abraham]

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

[David]

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.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts