Question 225223 in Html Question posted in
Some basic documentation can be found here.

Html – Behaviour of background-size: cover in combination with background-position

I have this fiddle where I try to set background-size: cover and try out the different background positions with it.

My question
Why changing the Y-axis value for background-position doesn’t have any effect (same with top, center and bottom? It always shows the same area of the image on the Y-axis. How can I predict what part of the image will be shown given a container’s size and image’s size?

What I tried/learnt so far
What I understood is that it strongly depends on aspect ratio of both the container and the image. Making the container 500×250 px makes the Y-axis now variable, but now the X-axis stays always the same when setting left, center or right for it. Asking the question in different Discord channels, I also got an answer that image fits only in one axis and overlaps in another (that is, one of them is always static regardless of value). Is that true? Are there situations where both X-axis and Y-axis are dynamic and change position when supplied with different values?

Tags:

2

Answers


  1. 0

    Because this image has a "landscape" proportion, i.e. it’s much wider than it’s high. Therefore background-size: cover will always fit the full height of the image into the container and cut off the left and right side – if the container’s proportion (i.e. width to height ratio) isn’t even "more landscape-like" than the image. The vertical background-position has no effect in this case (i.e. with "cover").

    Login or Signup to reply.
  2. 0

    If background-position has a keyword value like right left bottom center or top the first value will simply override the other although MDN docs sort of state the opposite.

    This can be bypassed by using units instead of keyword values like:
    background-position: 200px 200px
    background-repeat: no-repeat

    adding background-repeat: no-repeat will also make it a single image which will allow you to see the effects of it.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search