Page Comparison

Creating the image resource

Start out by using your logo to place on a colored background. In this case, the logo is the shape in the middle, and the background is the color that will be used on the site.

⚠ Make sure to leave space in the image above and below your logo, and to make the proportions of the image similar to what they are in this example.

💡 Save it in x2 size for it to look nice on retina displays as well, max 2MB

Theme settings

1. Go to Refined Administration > Themes > Add a new one, or edit an existing theme.

2. In Theme Editor > Main Appearance,

   1. Use option Partial.

   2. Set the background to Image and upload your newly created image

   3. For the Image settings, use Full and make sure the image is positioned in the center for top to bottom.
      

   4. Image Modified

      In the same area of settings, set the Banner height to the same height as of your background image, or half of its size. In this example, the image is 1000px, and I will use 500px.
      

      Image Modified

3. In Theme Editor > Header

   1. Set the Color to transparent
      

      Image Modified

      
      

4. In Theme Editor > Start page

   1. Toggle on the Fill background option
      

      Image Modified

5. Save the theme.

6. Go to your site, where the theme is applied (the Theme is applied to the site via the Site Builder), and edit the layout.

   1. In the top section of your layout, verify that the option is set to Transparent.

   2. Add a Search Highlight or Navigation Highlight module if you don’t already have this set.

   3. For the module, set its height to match the height of your background image. In this example that number is 500px.
      

      Image Modified

   4. Publish the layout

7. You should now have a result where the logo is visible in a neat way in most screen dimensions.