Creating Scalable Background Images

When importing your Quest doc, we will automatically create the image files from images in your Figma design. These don’t adjust in scale or shape when the page is set up for responsiveness. That is perfectly fine for most cases but commonly, you may wish to have a background image that fills the background as the container changes shape.

This technique only works with Frames so adjusting Image Fit will not work on a layer that is an image. You need to create a frame, then set the fill of that frame to an image. The best setting in most cases is the default which is “Fill” but you can adjust which is best for you in the drop-down in Fill > Image pop-up in Figma.

Now when you import into Quest, that image will retain those Image Fit settings.

In the example above, the spaceship background image is set on the frame that contains the title, link and button inside it. At 1146px screen width, it crops into the image and parts of the larger images are hidden off screen.

In the example above, at 1920px screen width, much more of the image is revealed as it fills the frame that is adjusting in size.