background-position-y doesn't work in Firefox

Question

In my code the background-position-y doesn't work. In Chrome it's ok, but not working in Firefox.

Anyone have any solution?

Answer 1

background-position-y :10px; is not working in Firefox web browser.

You should follow this type of syntax:

background-position: 10px 15px;

10px is bounded to "position-x" and 15px bounded to "position-y"

100% working Solution

Follow this URL for more examples

Answer 2

Use this

background: url("path-to-url.png") 89px 78px no-repeat;

Instead of this

background-image: url("path");
background-position-x: 89px;
background-position-y: 78px;
background-repeat: no-repeat;

Answer 3

Make certain you explicitly state the measurement of your offset. I came across this exact issue today, and it was due to how browsers interpret the values you provide in your CSS.

For example, this works perfectly in Chrome:

background: url("my-image.png") 100 100 no-repeat;

But, for Firefox and IE, you need to write:

background: url("my-image.png") 100px 100px no-repeat;

Hope this helps.

Answer 4

background: url("path") 89px 78px no-repeat;

Will not work if you want a background along with the image. So use:

background: orange url("path-to-image.png") 89px 78px no-repeat;

Answer 5

Why don't you use background-position directly?

Use:

background-position : 40% 56%;

Instead Of:

background-position-x : 40%;
background-position-y : 56%

Answer 6

Firefox 49 will be released—with support for background-position-[xy]—in September 2016. For older versions up to 31, you can use CSS variables to achieve positioning the background on a single axis similar to using background-position-x or background-position-y. CSS variables reached Candidate Recommendation status in December 2015.

The following is a fully cross-browser example of modifying background position axes for sprite images on hover:

:root {
    --bgX: 0px;
    --bgY: 0px;
}

a {
    background-position: 0px 0px;
    background-position: var(--bgX) var(--bgY);
}

a:hover, a:focus { background-position-x: -54px; --bgX: -54px; }
a:active   { background-position-x: -108px; --bgX: -108px; }
a.facebook { background-position-y: -20px; --bgY: -20px;  }
a.gplus    { background-position-y: -40px; --bgY: -40px;  }