Design Settings » Homepage » Hero Background Image

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000078952

Hero Background Image

These settings control the main image on the first fold in the homepage of the website, we recommend using images with the following dimensions: 1800px wide by 600px high. The file size is also important, we recommend using images that are not more than 200 KB.

To edit the Hero Back navigate to:

Settings
Design Settings
Homepage Tab

Visual Guide of the Hero Background Image

1. Display Background Image

Use this section to add the main image that will display above the fold on the homepage, to use the Homepage Slideshow, read the following article: Homepage Background Slideshow Settings Our recommended size for the image is 1800 px by 600 px.

Yes - Display Background Image

No - Hide Background Image

2. Display Hero Section on Mobile

This setting controls if the image will be viewable on mobile devices or not.

Yes - Display on Mobile View

No - Hide on Mobile View

3. Background Image Behavior

This setting controls if the background hero image will be Mobile Ready or Standard View. We strongly recommend using the Mobile-Ready View

Mobile Ready View

4. Replace / Upload Image

This setting is used to upload a new image for the hero image on the homepage's first fold.

Replace / Upload Image

Mobile Image

The image uploaded here will replace the main hero homepage image, when the website is accessed using mobile devices.

5. Top Spacing

This setting will add extra padding to the top of the main image, this will help better align the graphic elements inside the hero image. The available options go from 0px to 400px

6. Bottom Spacing

This setting will add extra padding to the bottom of the main image, this will help better align the graphic elements inside the hero image. The available options go from 0px to 400px

7. Image Overlay Color + Image Overlay Visibility

These settings select how transparent or opaque the Overlay is applied to the Hero Image. This becomes very helpful when using white fonts, allowing the text to be legible on an image that has lots of colors. For dark fonts with opaque images, this setting can be used to se the background white.

Overlay 6

0 (invisible)