Background | 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

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

< Navigation Bar

Facets and Sorting >

Feedback

<% elem.innerText %>