A Hero Image is an image that serves as the "welcome" screen to your website at the top portion of your home page.

• Add a hero image
• Make hero image appear behind header, logo, and navigation

Add a hero image

1. Navigate to the Pages tab at the top of your Websites app, then open the page you'd like to add a hero image to.
2. Create an image gallery block and upload your desired image(s) to it.
   
3. Click Design this page at the top of the page.
   
   
4. The Design panel will open. On the right-hand sidebar, click on the Page tab and select Image gallery.
   
   
5. Next to Height, open the menu and select Adjust manually. If you prefer your hero Image to take up the full upper half of your webpage, select Fit to window.
   
   
6. Scroll down the right-hand menu until you see Container and tick the box next to Expand content to container edges. This stretches the image to each side of the webpage (if you have a Wrapper set on your template, it will stretch the image to the end of the wrapper).
   
   
7. Click Save at the bottom of the sidebar.

Make hero image appear behind header, logo, and navigation

If you want to have your hero Image appear behind your site's header, logo, and navigation menu, follow these steps:

1. Open the Design tab at the top of your Websites app.
2. On the right-hand sidebar, click on the Sitewide tab and choose Header & Logo.
   
   
   
3. Scroll down until you see Container, and click to expand that section.
4. Click on the box next to Color. In the menu that appears, use the Opacity scroll to change the opacity. You want to change the opacity all the way down to 0.
   
   
5. On the right-hand sidebar, click on the Sitewide tab again, and choose Navigation.
6. Scroll down until you see Container, and click to expand that section.
7. Click on the box next to Color. In the menu that appears, use the Opacity scroll to change the opacity. You want to change the opacity all the way down to 0.
   
   
8. On the right-hand sidebar, click on the Page tab at the top of the sidebar.
9. Under the Page tab, click on the "gear" icon to open the Page Settings. Tip: If you don't see this option, try clicking the Page tab a second time.
   
   
10. Under Page Settings, use the Top Padding scrollbar and slide it all the way to the left.
    
    
11. Click Save at the bottom of the sidebar.