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

dialog
bug
ui

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