Cannot use `background-size` and `background-position`

Adobe XD UXP Plugin API
, , ,
1

Hey everyone :raised_hand: ,

This is Doğa.

I’ve started to implement a plugin. I’m having problem with background-images of elements. I can set background-image property in CSS and i’m able to see that image as background but the problem is i can’t position or resize background images using background-size and background-position properties. Those props don’t affect at all. I can see those props are supported in docs though.

Any ideas here?

Thanks.

2

@Doga could you show us how you set those properties and their values in your CSS?

3

Sure, here it is:

.Wrapper {
  width: 100px;
  height: 80px;
  background-image: url(*[imageUrl]*);
  background-size: cover;
  background-position: center center;
}

In this way, background image not covered and position is not centered. It’s always starts positioning from left-top and sizes as original size. I always have same view whether i use background-size and background-position or not use.

Thanks.

4

Shorthand properties also doesn’t work for background.

background: url(*[imageUrl]*) no-repeat cover;

Basically i’m trying to center and cover an image into an element with fixed dimensions. I tried using background-image as well as img element inside parent. Their behavior is not same as browser and seems like i’m unable to do what i want in XD environment.

I appreciate any suggestions for centering and covering (either landscape or portrait) an image inside parent.

Thanks.

5

Improved background position and sizing is coming to an XD release near you soon.

That said, in XD 17, at least, I can’t replicate your issue with background-size – cover and contain work as expected. The position, however, can’t be modified yet (until the release that I allude to above).

6

Is “background-repeat” working?

1 Like
7

According to CSS support · Adobe XD Plugin Reference, while the background-repeat property itself is supported, every repeat value (repeat, repeat-x, and repeat-y) is declared “UNSUPPORTED”. Assuming that the documentation is up-to-date, it therefore appears to not really be supported :thinking:

8

I’m sorry. I was in the wrong sub-forum again. I’m using Photoshop and there it doesn’t seem to work.

1 Like
9

Still, I would (without knowing all the internals of UXP) assume it’s the same “thing” as it’s both UXP. In fact, here’s a Photoshop UXP API reference saying the same thing (just with different words): https://www.adobe.io/photoshop/uxp/uxp/reference-css/Styles/background-repeat/ :wink:

1 Like