A Hero Image is designed as a background accent for your page. Hero Images will dynamically re-size depending on screen size and will appear differently to most of your site visitors based on their device type and screen settings.
In this article:
What is a Hero Image?
A Hero Image is designed as a background accent for your page.
Adding a Hero Section can allow you to create a Hero Image in which the image uploaded dynamically resizes depending on your user's screen size to provide a fluid user experience with your page.
To create a Hero Image, change the spacing to Full Height in your Premier page:
This means your Hero Images may appear differently to each user depending on the device they use to view your page. We recommend selecting an image to best fit the dynamic nature of the Hero Image.
The image will resize from the center of the image. With this in mind, be sure to edit your image before uploading to make the center of your image the main focal point.
The recommended image size for the Hero Section Background is 2880 x 1200 px.
Learn to add and customize your Hero Section in Premier
Dark overlay on your Hero Background Image
If your Hero Background Image looks too dark, you can change the overlay color by adjusting the overlay opacity or toggling off the Image Overlay entirely.
To toggle off the Image Overlay:
- Open the Hero section in the template editor.
- On the left-hand sidebar editor, uncheck Use Image Overlay:
To customize the Image Overlay color and transparency:
- Open the Hero section in the template editor.
- Scroll down to the Background Color option on the sidebar.
- Open the color picker and slide the transparency bar to your liking:
And that's how to customize your Hero Image Overlay in Premier! Please vote below and let us know if you found this article helpful. We value your feedback. Thanks for being the best part of Kajabi!
