Skip to main content
Steve20
Steve20
June 22, 2022
Question

How do I export a background image exactly as it appears?

  • June 22, 2022
  • 11 replies
  • 10177 views

I’m a new Figma user and I’m building pages based on Figma mock-ups. I have only view access to the Figma design, and I can’t figure out how to export the background image of a frame while preserving the crop exactly as it appears in Figma.

When I export the frame itself, all content visible within the frame (text, buttons, etc.) is exported - i.e. it exports the framed region exactly as it appears. I want only the background image, but unlike this thread, I want just the portion of the background image that appears within the frame.

Is this possible? It seems like it would be a common need, but I can’t figure it out.

    This topic has been closed for replies.

    11 replies

    Show previous replies
    SquatchCreative
    SquatchCreative
    New Member
    January 21, 2025

    Anyone else shed light on this?  The background images were set as frame fill as ​@tank666 alluded to.  Whether in Dev mode or not, there doesn’t seem to be a way to access the image.

    I can see the image set in the Fill.  In the Inspect tab it has all of the CSS for the “Layout”, and then under “Style” it has: 

    background: url(<path-to-image>) lightgray 50% / cover no-repeat, url(<path-to-image>) lightgray 50% / cover no-repeat;

    Can’t click on the image.  Under Assets it lists the entire frame as an export option.  

    In the Code Panel, it just says “Image 1328x845”, not the actual file name, and no means of clicking on it. 

    If I copy the element as CSS, in the output I can see the image name in the CSS rules, but it is a relative path with no real URL to obtain the image. 

    Still left resorting to hiding the text frame overlaid on top and then exporting the component as a PNG.

    Thanks.

    Terms & ConditionsAccessibility statement