I wanted to experiment with setting background-size: cover and testing out different background positions. Feel free to check out the live fiddle for a hands-on experience.
HTML
<div id="container">
</div>
CSS
#container {
background: url(https://1.bp.blogspot.com/-iCnFX7eWVjs/XR9NQutHXcI/AAAAAAAAJ9k/ISWH3UXgJF8QJdsV6P9wh3agzOwOF_aYgCLcBGAs/s1600/cat-1285634_1920.png);
width: 500px;
height: 500px;
background-size: cover;
background-position: center center;
}
The Question
I'm puzzled by the fact that changing the Y-axis value for background-position doesn't seem to have any visible effect, regardless of using top, center or bottom. How can I predict which part of the image will be displayed based on the size of the container and the image?
My Experiments/Learnings so far
It seems like the behavior is heavily influenced by the aspect ratio of both the container and the image. When I adjusted the container to 500x250 px, the Y-axis started responding differently, but the X-axis remained static when using left, center or right. Some answers suggested that the image fits in one axis and overlaps in the other, hence one axis remains fixed no matter what value is set. Is this accurate? Are there scenarios where both X-axis and Y-axis can be dynamic and change position with varying values?