Adding an image as Answers background

Search Best Practices - Search Front-End
1

Hi all -

How do I set the Answers background to be an image, not a solid color? I’ve tried to target the ‘background-image’ property but to no avail.

Thanks,
Julian

2

Hi Julian,

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

body {
  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: Adding Images | Hitchhikers

Additionally, you may need to add additional CSS to adjust the size of the image and account for different device types. Let us know if you have additional questions on this!

3

Thanks Kristy!

To change the background to be an image I entered the following in the Answers.scss file above the .Answers{}

body, .Answers-footer, .Answers-navWrapper {
 background-image: url("https://www.skylinechili.com/wp- 
content/uploads/2019/01/SS_NewMenu_bkgd-original-163.jpg");
}
4

Hello,

I am trying to mimic this code by adding a background image to my promotional banner card. I was able to get the background-image: url to work, however I was unsuccessful in trying to reference an image uploaded to the repo. Please let me know how I can complete this!

Thanks.

5

Hey Jason,

For the selector, I would use the name of the card you’re targeting, such as promo-card, since this is added as a class to the card itself.

Screen Shot 2022-04-04 at 2.00.25 PM

For the CSS property, you can still use background-image. The value will be a URL relative to the answers.scss file (where you’re adding the CSS). If the image you’re referencing is in the static > assets > images folder, this URL will be "../assets/images/background.png" (the .. will go up one level to the static folder).

image

Putting all of that together, you can use the following CSS ruleset:

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

You can use CSS to add any additional styling. Some rules I suggest looking into are background-size and background-repeat.