Custom Background Code Examples | Yext Hitchhikers Platform

Adding an Image as Search Background

You can use the background-image property to set a background image, using code such as the below. If you are using the Code Editor, make sure to place this outside of the .Answers{} class in the answers.scss file.

body, .Answers-footer, .Answers-navWrapper {
  background-image: url("https://hitchhikers.yext.com/img/onward/metaimage.jpg");
  background-size: 100%;
}

You can either use the absolute URL of the image if it exists online or upload the image to your assets folder and reference it such as in this unit .

Additionally, you may need to add additional CSS to adjust the size of the image and account for different device types.

Image as Background Example

You can also add an image as the background of a promo banner. Read more on how to set up a promo vertical, here .

 .promo-card {
background-image: url("../assets/images/background.png");
}

Using Linear Gradients as a Background

body, .Answers-footer, .Answers-navWrapper {
  background-image:linear-gradient(240deg, red, yellow, green);
}

If you are using the Code Editor, make sure to place this outside of the .Answers{} class in the answers.scss file.

Linear Gradient as Background Example

Using Linear Gradients in the Results Title Bar

  .HitchhikerResultsStandard-title {
 background-image: linear-gradient(to right, red, orange, yellow);
}

Linear Gradient as Results Title Bar Example

Back

< Custom Navigation Bar Code Examples

Custom Facets and Sorting Code Examples >

Feedback

<% elem.innerText %>

Custom Background Code Examples | Yext Hitchhikers Platform

Adding an Image as Search Background

Adding Background Image to Promo Banner

Using Linear Gradients as a Background

Using Linear Gradients in the Results Title Bar