Archived topic

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

4 replies · Started by Elizabeth on April 2, 2020

Viewing posts 1–5 of 5

April 2, 2020 at 5:28 pm #1224281

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!

April 2, 2020 at 9:03 pm #1224366

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

April 2, 2020 at 10:05 pm #1224399

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 :)

April 3, 2020 at 5:33 am #1224726

Perfect, thank you Leo!

April 3, 2020 at 8:04 am #1225100

No problem :)

This archived topic is closed to new replies.

Start building better websites today.