Set your logo as site background

Owned by Madzy Soetman
Last updated: May 25, 2023
1 min read

To set your company logo as your Refined site’s background:

  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. Make the picture as high-quality as you can, with a maximum of 2 MB.

  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. Save the theme and go to the home page of the site you applied the theme to.

  6. Edit the layout, and:

    • Make sure the section is set to Transparent.

    • Add a Search Highlight or Navigation Highlight module

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