[Support request] Gradient background for header and first section

Home Forums Support Gradient background for header and first section

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #988634
    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?

    #988784
    David
    Staff
    Customer Support

    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.

    #988855
    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

    #989011
    David
    Staff
    Customer Support

    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.

Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.