[Resolved] Head On template, how to make Header Element background Image full width

Home Forums Support Head On template, how to make Header Element background Image full width

  • This topic has 4 replies, 2 voices, and was last updated 2 months ago by Leo.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1224281
    Elizabeth

    Hi there,

    I’ve been loving using the Head On setup from the new library! However, can’t figure out how to make the background (custom image) of the home page header element be full width and bottom aligned without messing up the text above it. Can you please point me in the right direction/advise? I see a bunch of header CSS in the Customizer but not sure what to modify that won’t mix everything else up. TIA!

    -Liz

    #1224366
    Elizabeth

    The same thing is happening with other pages’ header elements too, not just the home header element… what am I missing?

    -Liz

    #1224399
    Leo
    Staff
    Customer Support

    Hi there,

    Go to Customizer > Additional CSS and find this block of CSS:

    .page-hero {
        height: 100vh;
        background-size: 70vh;
        background-position: 90%;
    }

    Change background-position to 100% and increase the background-size of 70vh as you see fit.

    Let me know if this helps 🙂

    #1224726
    Elizabeth

    Perfect, thank you Leo!

    -Liz

    #1225100
    Leo
    Staff
    Customer Support
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.