Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

firefox

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

Anyone have any solution?

like image 568
Marlos Carmo Avatar asked Feb 13 '13 00:02

Marlos Carmo


People also ask

What is background-position y in CSS?

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 .

Why background is not working in HTML?

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.

What is background-position center in CSS?

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.


1 Answers

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.

like image 50
Orabîg Avatar answered Oct 05 '22 19:10

Orabîg