TL;DR All the percentage values used with background-position are equivalent when using a gradient as background, so you won’t see any difference. You need to specify a background-size different from the container size: body { display: flex; flex-direction: column; justify-content: space-around; align-items: center; min-height:90vh; } .button { text-decoration: none; color: white; font-weight: bold; width: 350px; … Read more
Here you go: $(document).ready(function(){ $(‘#submenu li’).hover(function(){ $(‘#carousel’).css(‘background-position’, ’10px 10px’); }, function(){ $(‘#carousel’).css(‘background-position’, ”); }); });
Firefox doesn’t support backgroundPositionX, but it does support background position So we can do something like this: psy.style.backgroundPosition = x+’px 0′; This sets the background position, X first, then Y. Working example here
Your problem is that the repeat-y is going to fill the whole height, no matter where you position it initially. Thus, it overlaps your top and bottom. One solution is to push the repeating background into a pseudo element positioned off of the container by the 12px at the top and bottom. The result can … Read more
You don’t need to use the background animate plugin if you just use separate values like this: $(‘.pop’).animate({ ‘background-position-x’: ‘10%’, ‘background-position-y’: ‘20%’ }, 10000, ‘linear’);
Splitting background-position into -x and -y was proposed for CSS 3 but it got rejected as the working group “considered the use case too weak to introduce new properties for.” Additionally, there seemed to be some ambiguity concerns with multiple background images and CSSOM, the API behind CSS. I’m not sure how WebKit and Trident … Read more