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

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.

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

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.

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.

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-sizecover and contain work as expected. The position, however, can’t be modified yet (until the release that I allude to above).