Build Your Course The Easy Way
Get Started Free

How to use the hero image section in Premier

Learn how Hero background images behave in the Premier theme and how they will appear to your users.

In this article:


Hero Image basics

A Hero image is designed as a background accent for your page. Hero images will dynamically re-size depending upon the screen size and will appear differently to most of your members, depending upon the device they are using, as well as screen settings.

Tip:
Exercise caution when using logos or text, as it may not be visible to all users on all screen sizes.

The image will resize from the center of the image, so make sure the area you want as your main focal point is in the center. There is NOT a way to make this image static:

Hero Image Preview

Dark overlay on your Hero Background Image

If your Hero Background Image looks too dark, you can easily change the overlay color by adjusting the overlay opacity or toggling off the image overlay entirely:

  • Toggle off the "Use Image Overlay" option or
  • 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 all the way to the left:

Contact support or access our 24/7 Live Chat:

Contact Support Live Chat

Need Help? Live Chat with Us.