Build a space travel website > background-size: cover and background-position
Hi everyone, I just completed the above-mentioned Scrimba course.
My questions are related to this video: https://scrimba.com/learn/spacetravel/adding-the-background-images-cof4b40e185ce1ca26fd638c0, where Kevin adds background images to the homepage. I couldn't understand how exactly
background-size: cover works together with background-position .
My questions:
1) I couldn't understand what he's saying and meaning at 0:43 - if were on a weird screen sizes it’s not gonna run the image is exploding on the top. I can't hear well what's the exact wording. Probably it has to do with the default background-position?
2) The different positions on mobile and tablet versions made sense in the course, but I have a fiddle -> https://jsfiddle.net/g5ysc92k/ on which I tested different combinations of values for background-position and the result was that bottom center, center center and top center give the same result. And I can't understand why?12 Replies
@rokata91
I want to try to explain, but maybe it's clearer if you see it work for yourself first.
I think I understand where the confusion comes in. In your fiddle try setting the height to 250px and keep the width 500px. Then try again with the different combinations listed above. Hopefully this clears things out for you. If not feel free to DM me.
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.
What cover tries to do is to have the image cover the entire area. That means it always fits exactly in one axis, and overlaps in another. With background-position you are setting first the bahavior of the background-position on the vertical axis and then the horizontal one. In the example you posted, with width and height at 500px, the image fits in the vertical axis and overlaps the horizontal axis. That means that whatever value you choose for the vertical axis has no visible effect. However if then you change the height to 250px, you change the aspect ratio of the container, and now the image fits perfectly on the horizontal axis and overlaps the vertical one. When the image overlaps on the axis you're setting a value for, then you'll see a visible change. Does this make more sense? If no, not to worry, i'll include an image later.
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?
@rokata91 I've made a small figma file:
https://www.figma.com/file/TeVoivcqBbMr8ox6Y6zbAl/Untitled?type=design&node-id=1%3A17&mode=design&t=4ZlQNTX5TAfH79Xq-1
If you go to the layers panel and hover over the images in each frame, you'll see how it overlaps its container. It is similar to how image cover does its work given the settings the layer has.
@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).
Hehehe @rokata91 yeah I think your numbers example made sense. What I meant by that is that the layers in figma are named:
center center or top center or center left. The way the image appears in a frame with that name is also how it would appear were you to use those settings (for example top center) in code.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)?
This was manually placed this way. Don't think Figma has support for this yet, not sure however
@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.
@rokata91 hey, awesome you ask again and not just say you get it, when you don't. I'd be willing to have a video call about this and walk through it together, as I'm also having difficulty wording it differently. Feel free to reach out via DM if you want.
@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!