Does background-position-y not work in Firefox (via CSS)?

Question

In my code, background-position-y does not work. In Chrome, this is fine, but it does not work in Firefox.

Anyone have any solution?

Answer 1

If your x-position is 0, there is no other solution than writing:

 background-position: 0 100px; 

background-position-x is a non-standard implementation coming from IE. Chrome made a copy, but unfortunately not firefox ...

However, this solution may not be ideal if you have separate sprites on a large background, and rows and columns mean different things ... (for example, different logos in each row, selected / hanging on the right, left) In this case, I would suggest split a large image into separate images or write different combinations in CSS ... Depending on the number of sprites, one or the other may be the best choice.

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

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 background positioning on the same 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 changing the background axes of hover sprites:

 :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; } 

Answer 4

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

You must follow this type of syntax:

 background-position: 10px 15px; 

100% working solution

Answer 5

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

Will not work if you need a background along with the image. Therefore use:

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

Answer 6

Why aren't you using background-position directly?

Application:

 background-position : 40% 56%; 

Instead:

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

Answer 7

This worked for me:

 a { background-image: url(/image.jpg); width: 228px; height: 78px; display: inline-block; } a:hover { background-position: 0 -78px; background-repeat: no-repeat; } 

Answer 8

However, this solution may not be ideal if you have separate sprites on a large background, and the rows and columns mean different things ... (for example, different logos in each row, selected / hanging on the right, left, left). in this case, I would suggest splitting a large picture into separate images or writing different combinations in CSS ... Depending on the number of sprites, one or the other may be the best choice.

Mine has the exact problem, as pointed out by Orabîg, which has a table similar to a sprite with columns and rows.

Below is what I used as a workaround using js

 firefoxFixBackgroundposition:function(){ $('.circle').on({ mouseenter: function(){ $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' -10px'); }, mouseleave: function(){ $(this).css('background-position',$(this).css('background-position').split(' ')[0]+' 0'); } }); } 

Answer 9

Make sure you explicitly indicate your displacement measurement. Today I ran into this exact problem, and it was due to how browsers interpret the values ​​you provide in your CSS.

For example, this works fine 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.