Background images rendered outside of symbol when using background position

[acrossell-hedgehog]

If an element has a background image position set, the background image is rendered outside of the symbols bounds when imported into Sketch. Is there a known workaround for this?

[chrisvxd]

Hi @acrossell-hedgehog, this sort of functionality is generally handled by the core dependency html-sketchapp. I'm due to upgrade to the latest version, which may address this issue, but I haven't had a chance to investigate yet. Will let you know :)

[acrossell-hedgehog]

That's great news, Chris!

I'm looking to bring this into the center of our design flow. This issue and the sketch resizing are the only issues that might get sticky with the design team so I'm really excited to see this drop in.

Many thanks!

[chrisvxd]

Hey @acrossell-hedgehog - I'm currently investigating this and I'm unable to reproduce the scenario you're describing. I have:

      <div
        className="my-div"
        style={{
          backgroundImage: "url(https://picsum.photos/200/300/?random)",
          backgroundRepeat: "no-repeat",
          backgroundPositionX: 50,
          backgroundPositionY: 50,
          border: "2px solid hotpink",
          display: "inline-block",
          padding: 50
        }}
      >
        Hello, world!
      </div>

In storybook:

In sketch (ignore changing image):

Are you able to share your styles?

[acrossell-hedgehog]

Hi @chrisvxd,

I believe the issue arises when background size is set to cover or contain

[chrisvxd]

@acrossell-hedgehog I've noticed some issues with background-size: contain, but I'm unable to reproduce exactly what you're talking about, or any issues with cover. I can't really diagnose further without a concrete CSS example with screenshots describing what you're encountering.

Having said that, this is more than likely an issue with html-sketchapp (the thing that handles the actual HTML -> Sketch conversion for story2sketch), so it might be worth us opening a ticket there and cross referencing here.

[acrossell-hedgehog]

The problem seems to be with background-position: center