How to change the background image of the search area

Some of our themes have a large background image behind the search area.

Freshdesk doesn't have an option to upload images using the admin dashboard. That is why it's necessary to upload your image to your main website or a cloud hosting like Amazon S3. Once you have a link to the image, you need to change the corresponding URL in the theme.

Below, you can find instructions on how to change the background image for certain themes.

Barren

1. Click on Admin > Portals
2. Hover over the respective Portal and click Customize.
3. Select the Layout & Pages tab.
4. Under Head, find the following lines:

   .hero-unit {
       background-image: url(https://s3-us-west-2.amazonaws.com/breezythemes/barren/pattern.svg);
   }

5. Replace the URL.
6. Click the Save and Publish button.

Breezy Plus

1. Click on Admin > Portals
2. Hover over the respective Portal and click Customize.
3. Select the Stylesheet tab.
4. Find the following lines:

   .topbar--with-image {
     background: url(//theme.zdassets.com/theme_assets/568575/173c6700f2eaf0cfc206ce084814bbc6514cafd5.jpg)
       no-repeat center;
     background-size: cover;
     background-position: 50% 30%;
     position: relative;
     z-index: 2;
   }

5. Replace the URL.
6. Click the Save and Publish button.

Bridge

1. Click on Admin > Portals
2. Hover over the respective Portal and click Customize.
3. Select the Layout & Pages tab.
4. Under Header, find the following lines:

   <header class="header" style="background-image: url(https://s3-us-west-2.amazonaws.com/breezythemes/bridge/cover.jpg)">

5. Replace the URL.
6. Click the Save and Publish button.

Frio

1. Click on Admin > Portals
2. Hover over the respective Portal and click Customize.
3. Select the Layout & Pages tab.
4. Under Page layout, find the following lines:

   {% assign hero_image_url = 'https://s3-us-west-2.amazonaws.com/breezythemes/floyd/darkblue/cover.jpg' %}

5. Replace the URL.
6. Click the Save and Publish button.

Moose

1. Click on Admin > Portals
2. Hover over the respective Portal and click Customize.
3. Select the Stylesheet tab.
4. Find the following lines:

   .topbar.topbar--with-image { 
     position: relative; 
     z-index: 2; 
     background: url(https://s3-us-west-2.amazonaws.com/breezythemes/theme-moose/cover.jpg) no-repeat center; 
     background-size: cover; 
   }

5. Replace the URL.
6. Click the Save and Publish button.

Otay

1. Click on Admin > Portals
2. Hover over the respective Portal and click Customize.
3. Select the Layout & Pages tab.
4. Under Page layout, find the following lines:

   <section class="hero-unit" style="background-image: url(https://s3-us-west-2.amazonaws.com/breezythemes/ogden/cover.jpg)">

5. Replace the URL.
6. Click the Save and Publish button.

Alternatively, you can request a customization service from us, and we will help you to change the image on your portal.