How to Change the Homepage Background Image in SuperSite

When you want to update the SuperSite homepage with a new background image. This article explains how to change the homepage background image in SuperSite.

To change the homepage background image on the Supersite as illustrated below:

1. Visit your Supersite and right-click on the Menu Bar » Inspect Element.
   • This will either open a separate window or open a pop-up on the same page. Click on the 3 vertical dots next to the 'X' on the top right corner of the window/pop-up as illustrated below:

     

   • Select the dock side as 'Dock to right' as illustrated below:

     

   • The window should look like this:

     

   • Click on “Elements” and “Styles” as illustrated below:

     

2. Click on <div class="new-homepage-wrapper"> under the Elements section as shown below:

   

3. Access your Supersite Admin Area and follow the path below:

   Dashboard » Manage Theme » Images » New-homepage-banner.png

4. Click on the “Choose File” tab by following the path above and click on the Upload Image tab to upload the new background image.
   NOTE: Ideally the image that you upload should be of the following size:

   1920 x 460

   OR

   1920 x 500

5. Reload the Supersite cache and the new background image will be displayed on your Supersite.

There could be a possibility that users may use a higher resolution and thus the Background image should auto-resize on browsers to fit the page.

To ensure the auto-resize functions correctly, you will need to add the following code:

• background-size: cover
• height:

The value for height can be specified as per your need. Example:

40vh

, where "vh" stands for VirtualPort and this unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

Access the Supersite admin area and add the above code to the following path:

Dashboard » Manage Theme » CSS » Homepage » Homepage.css » Line number 146

Save the changes and Reload the Supersite cache to ensure the new changes take effect.