In my code the background-position-y
doesn't work. In Chrome it's ok, but not working in Firefox.
Anyone have any solution?
The background-position-y CSS property sets the initial vertical position for each background image. The position is relative to the position layer set by background-origin .
Make sure the image path is set correctly in the background-image url. Once you have made sure that your CSS file is linked correctly, also check that the image itself is set correctly. Again, you will want to open your code inspector in the browser to check.
background-position: center top;: This property is used to set the image at the center top position. Example: This example illustrates the use of background-position property where the position value is set to the center top position. HTML.
If your position-x is 0, there's no other solution than writing :
background-position: 0 100px;
background-position-x is a non-standard implementation coming from IE. Chrome did copy it, but sadly not firefox...
However this solution may not be perfect if you have separate sprites on a big background, with rows and cols meaning different things... (for example different logos on each row, selected/hovered on right, plain on left) In that case, I'd suggest to separate the big picture in separate images, or write the different combinations in the CSS... Depending on the number of sprites, one or the other could be the best choice.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With