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

[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!

[Elizabeth]

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

[Leo]

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 🙂

[Elizabeth]

Perfect, thank you Leo!

[Leo]

No problem 🙂

[Author]

Posts