Best way to integrate a full width header image (different hero image on pages)

Hey there,
I’d like to know the best way to integrate a full width header image (different hero image on pages)
I began by adding a section and adding the image as a background, afterwards I added a gap http://prntscr.com/mwsx2j

however this can’t be the best solution right?
what would you recommend?
thanks for your help!

Hello @zerotoone.de,

Thanks for reaching out. :slight_smile:

There can be multiple ways to achieve the layout. If you are using Pro Theme and header builder then the image can be added as a background and navigation on top of the same.

If you are using X Theme (as you have both the licences), you can use Revolution Slider to mimic the layout. Here’s some resources that you can take a look.

Thanks.

thank you, I’am currently using pro.
What would approach should I take?

Hi @zerotoone.de,

Since it needs to be different images on different pages, you have the right approach that does not involve customization.

Add a top section with Remove Spacing



Apply the background-image on that section and put a Gap element on it.

Or add the image as Image element so you don’t need the Gap.

Thanks,

what else do I have to consider if adding the image as an element in order to make it full width?

Hi @zerotoone.de,

You also need to turn off the Retina option to display the image as the original size:

Hope it helps :slight_smile:

Ok I think its the best solution to use a section with the desired image in the background, is there a trick how I can make the image full width and height of the screen? what gap size should be used in this case?
thanks for your help!

Hi @zerotoone.de,

To set the section full height, try adding this code to the Element CSS of the section:

$el {
    height: 100vh;
}

If you want to use a gap to set the height of the section, try setting the gap’s height to 100vh.

If you have set the page’s template to a blank - no container template, you sections should automatically be fullwidth.

Hope this helps.

thank you works great

You’re welcome!
Thanks for letting us know that it has worked for you.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.