Setting the Scene
Your fiddle has been tweaked for demonstration purposes, maintaining the image proportions and relevant CSS properties. Let's start by examining what we achieve with our setup:
.container {
max-width: 480px;
background: orange;
}
.project {
width: 100%;
background-image: url("https://i.sstatic.net/Wurh4.png");
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
padding-bottom: 54%;
}
<div class="container">
<div class="project">
</div>
</div>
Image width: 504px
Image height: 276px
Container width: 480px
Container height: 259.2px // FireFox 53
Due to background-size: contain, our background-image has the following dimensions:
BG image height: 259.2px
BG image width: 473.3217...px
The height equals the container height (this is how contain works here). The width is then calculated as: (259.2 / 276) * 504.
Difference D: 480px - 473.3217...px = 6.6782...px
This represents the gap in the snippet above. Due to background-position-x: center, you see ~3px on the left and another ~3px gap on the right.
Understanding background-position and percentages
In essence: background-position-x: 50% aligns the center of the background-image with the center of the container. So background-position-x: 100% will position the image's right side at the container's right side.
.container {
width: 700px;
height: 300px;
background: orange;
background-image: url("https://i.sstatic.net/Wurh4.png");
background-position: 90% 50%;
background-repeat: no-repeat;
}
<div class="container">
</div>
The calculated difference D corresponds to the 100% in background-position-x: 100% in pixels.
7100% - not a Random Number
Difference D: 6.6782...px
Factor F: 480px / D = 71.8749...
To move the background-image completely out of view, background-position-x: 7174% would be required. Question 1 should now be clarified. In short, setting 100% in background-position holds significant significance.
When I set the padding-bottom to anything over 54%, the transition and everything stops working.
Indeed, this occurs when the background-image width surpasses the container width.