Answers Background Image Flashes when Navigating Verticals

Search Best Practices - Search Front-End
1

Hey Team!

I added a background image to my Answers experience and I am noticing that it oddly flashes when navigating between different verticals. It’s almost as if it takes a second to load.

Here is a video of what I am talking about: 2021-01-21_14-25-01.mp4

I have seen other experiences utilizing background images that don’t do this, so perhaps I set it up wrong? I saved the image as an asset, then set it in the answers.scss file.

2

Hi Jessie,

Thanks for reaching out. There are two potential adjustments I would work to make here:

  1. The png file youre using might not be “optimized” which might be the difference between yours and other experiences. I would recommend using jpg and to compress the image as much as possible. You can google a converter and compress website for doing so!

  2. Choose a color to load before the image so it’s not a white flicker — to do this the code would like like this:
    background: #115740 url('../assets/images/background.png');
    You can insert any hex value above that works best for you.

Let us know if other questions arise!

Best,
Alyssa