Rosen
KPCKevin Powell - Community
•Created by Rosen on 7/26/2023 in #front-end
Build a space travel website > background-size: cover and background-position
@wschaap91 I think I got it now after some experimentation. As you said the background can move along only one axis and is fixed for the other axis. Am I right with this assumption or there's a case when both axes can move while changing
background-size values? If there's such a case, can you provide such image? Thanks a lot for being so responsive on this thread!13 replies
KPCKevin Powell - Community
•Created by Rosen on 7/26/2023 in #front-end
Build a space travel website > background-size: cover and background-position
@wschaap91 Clear. I just went through the entire discussion again and I want to clear for myself a few points.
So on one of your previous comments
That means it always fits exactly in one axis, and overlaps in another.1) How do we determine on which axis it fits and on which overlaps? Does it have to do with what I posted a little bit above (with comparing 16:10 to 10:10 and 16:8 to 16:10 aspect ratios)?
In the example you posted, with width and height at 500px, the image fits in the vertical axis and overlaps the horizontal axis.2) Couldn't understand why the image fits in the vertical axis - you've got 1005px in Y-axis in the original image and 500px for the container, doesn't it mean it overlaps as well? I just can't get my head around the concept of fitting and overlapping.
13 replies
KPCKevin Powell - Community
•Created by Rosen on 7/26/2023 in #front-end
Build a space travel website > background-size: cover and background-position
Thanks a lot @wschaap91 ! Sorry if it's sounds like a dumb question, but did you manually place them in Figma like that or Figma rendered them like this based on some settings (I guess settings similar to those in CSS)?
13 replies
KPCKevin Powell - Community
•Created by Rosen on 7/26/2023 in #front-end
Build a space travel website > background-size: cover and background-position
@wschaap91 Thanks a lot for the illustration, starts to make sense. 🙂
Can you confirm if my above assumptions are correct or it's just a coincidence of numbers?
Also what settings are you referring to by given the settings the layer has? (I don't have much experience with Figma).
13 replies
KPCKevin Powell - Community
•Created by Rosen on 7/26/2023 in #front-end
Build a space travel website > background-size: cover and background-position
Thank you! My thoughts:
That means it always fits exactly in one axis, and overlaps in another.
In the example you posted, with width and height at 500px, the image fits in the vertical axis and overlaps the horizontal axis.I think I can't understand what fits and overlaps exactly mean in this case, as the image is much bigger than the container. But here is how I get it now: 1) Image aspect ratio is around 16:10, container's is 1:1 (or let's say 10:10). In that case the background can move on the X-axis (16 > 10), but not on the Y-axis (10 = 10). 2) With container aspect ratio of 2:1, or let's say 16:8 vs 16:10 now the X-axis is fixed (16 = 16) and the Y-axis is variable (8 < 10). Am I understanding this correctly?
13 replies
KPCKevin Powell - Community
•Created by Rosen on 7/26/2023 in #front-end
Build a space travel website > background-size: cover and background-position
Yeah, I tried before with lower height and things were different. But I can't understand why the vertical part is locked at one place with height=500px, I can't understand how this decision was made by the browser? Given that it's 1005px high and it could have picked any other area.
13 replies