This Is Applicable To:

• Clients with SoCast Theme 3.0
• Must have ‘Manage Heroes’ permission

These are the instructions for c onfiguring the background that appears behind the content area of the hero. A maximum of 5 background images can be added to appear at random on browser refresh.

For information on mobile responsiveness see: Mobile Responsive Notes & Best Practices

Step-by-step guide

1. Go to: Website > Website Structure > Heroes > Click On An Existing Heroe To Edit or 'Add New'
2. Scroll down to the 'Background' section
3. A maximum of 5 full-screen background images can be added to appear at random on browser refresh.
4. To upload an image, click on 'Insert From Media Library'
5. Dimensions for the 'Hero Background Images': Determine the optimal image size for your hero background based on the following
   1. The ‘Height’ option selected in the ‘Appearance’ section in the hero editor for each hero. See: Theme 3.0: How Do I Edit The Hero Appearance?
   2. The ‘Website Hero Width’ and/or ‘Hero Width’ options selected in Website Settings > Theme Editor > Heroes. See Theme 3.0: Hero Website Theme Settings
   3. The ‘Default Website Width' option selected in Website Settings > Website Template. See Theme 3.0: Website Template Settings
   4. The minimum and maximum target screen resolutions used by your website audience according to your website analytics, e.g. Google Analytics
   5. Example 1: If your default website width is set to 1280px, the hero width in your theme settings is set to ‘Website Width Content with Full Screen Width Background’, and your target desktop screen width is 1366px, then the recommended minimum width for your hero background image would be 1366px
   6. Example 2: If your hero height is set to '1/2 Height Banner' and your target desktop screen height is 768px, then the recommended minimum height of your hero would be 768px
   7. Note that despite sizing images for optimal display, the presentation will ultimately still vary depending on the device screen and browser window size used by each website visitor
   8. For general reference (as of 2020), a width of 1980px and a height of 1080px can be used as a rough guideline to optimize for full screen images, unless your target audience uses larger screen resolutions
   9. The hero background image is always center cropped by default based on the device screen and browser size it is viewed on.
6. Click 'add image' upload up to 5
7. Image Position For Small Screens: Sets the position of all background images for this hero to display more optimally on small screens.
8. Background Color: Appears behind the hero background image and when no image is provided.
9. Click the 'Save/Update' button