CSS - Background position not working in Firefox [duplicate]

Question

This question already has answers here:

background-position-y doesn't work in Firefox (via CSS)? (9 answers)

Closed 7 years ago.

I have this site here: http://seasonsrestaurant.ca/

and In Firefox my social media icons are all the twitter icon. This is my CSS. How come background position is not working?

ul.social-media li.twitter{
    background-image:url(http://www.seasonsrestaurant.ca/images/social.png);
    background-position-x:0px;
    width:25px;
    height:26px;
}

ul.social-media li.instagram{
    background-image:url(http://www.seasonsrestaurant.ca/images/social.png);
    background-position-x:-26px;
    width:25px;
    height:26px;
}

ul.social-media li.facebook{
    background-image:url(http://www.seasonsrestaurant.ca/images/social.png);
    background-position-x:-52px;
    width:25px;
    height:26px;
}

Answer 1

You are using a non-standard CSS property that works in Chrome but not Firefox.

See: Is background-position-x (background-position-y) a standard W3C CSS property?

However, standard background properties will take care of the issue.