A Hero image is designed as a background accent for your page. Hero images will dynamically re-size depending on the screen size and will appear differently to most of your members, depending on the device they are using, as well as 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 users screen size to provide a fluid user experience with your page.
To create a Hero Image, change the Spacing to Full Height:
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: 2880x1200 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 theme 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 theme editor.
- Scroll down to the Background Color option on the sidebar.
- Open the color picker and slide the transparency bar to your liking:
