Page Comparison

...

1. Create an image that shows your logo on a coloured background, with the proportions 3:1. Place the logo in the middle, leaving coloured space above and below it.

2. Go to the Theme editor > Main Appearance and make the following settings:

   • 

   • Background: upload your image

   • Image options: full

   • Position image: centered

   • Banner height: the same height as your background image, or half of it.

3. In Theme editor > Header, set the background colour to transparent.

4. In Theme editor > Start page, toggle on Fill background.

5. In Theme editor > Site Homes, choose one of the two bottom options (Alternate or Wide Alternate)
   

   Image Modified

6. Save the theme and go to the home page of the site you applied the theme to.

7. Edit the layout, and:

8. Make sure the section is set to Transparent.

9. Add a Search Highlight or Navigation Highlight module

10. Set the module’s height to match the height of your background image. In our example, this is 500 pixels.

...