I want to avoid hardcoding values for background-position and background-size with pixels and I’m trying to set both using percentages. However, if I make it work on one viewport size, say desktop, things work unexpected on tablet/mobile viewport size – that is, I need to use different values for the y-coordinate of background-position for different viewport width in order to retain the same position (otherwise image disappears as the viewport gets narrow). In the below code I use percentages for the green card only, the rest are just for demo purposes.