Is Background-Position-X (Background-Position-Y) a Standard W3C CSS Property

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

background-position-x and background-position-y are now part of the level 4 of Backgrounds and Borders standard.

RESOLVED: background-position-x/-y, background-repeat-x/-y
approved for level 4 of backgrounds and borders.

How-to set background-position-x?

You have to set background-position: 50% 50%. Those -x and -y properties are only supported in Internet Explorer and Webkit browsers.

Is it possible to change only the Y value of background position in CSS?

Only by reading (with JS) the current value of background-position (using a computed style method if it isn't set inline), parsing it to read the X value and then setting it again using the X value you just retrieved.

There is no way to say "Take the background position X value from the cascade and the Y value from this" in CSS.

CSS - Background position not working in Firefox

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.

Is it possible to change the X background position and not affect the Y background position of an element in JS or jQuery?

You can do background-position: Xpx Ypx, so you can adjust JUST the X value and leave the Y value alone.

You can also do this in pure CSS, just by using :hover and :active pseudo classes.

CSS3 background-size and background-position issue

The key to your problems is that percentage that you specify gives the point where the container and the image match. This point is calculated both in the image and in the container.

So, if you want the image centered, that means that the center of the image is in the center of the container. So, this is the value that you find by trial and error.

The key here is 50% as background-position always gets the image centered, and you don't need any of your calculations

If you specify 10% for the property, that would mean that the point at 10% from the left in the image is positioned at the point at 10% from the left in the container.

formula for this

How to convert from percentage to px (as requested).
Lets say that you have a container o size n and the image is greater by a factor of f You specify a background position of x%. We take this as an unitary factor a being a=x*100

The position to match in the container is an. The position to match in the image is afn. The position of the image from the container is the difference, afn-an , that can be given as an(f-1).

That explains why:

The apparent result of the property is inverted when f > 1 . (the image is bigger than the container.

The result is nil when f = 1 (the image is the same size than the container)

Now to convert that to space percentage, you just divide by the size of the container (n) to give

a(f-1)

or divide by the size of the image (fn) to give

a(f-1)/f

CSS background-position

I feel your pain!

It doesn't work on all browsers.

It was suggested to split background-position to background-position-x and background-position-y to be able to easily change one axis only. Sadly W3C people decided it was not useful enough to add it to the standard. You can read more about it here Bugzilla thread and here on w3c website

It does however work on Chrome, it seems like only Firefox does not support it from major browser. But it's still not in the standard and it may not be until CSS 4.

Positioning in IE and FF - box fix solution for inconsistent layout between browsers

I can see a discrepancy...

background-position-x and ``background-position-y` are not supported by Firefox and Opera (and is not a standard W3C CSS property).

so instead of using

background-position-x: -48px; background-position-y: -9px;

use

 background-position: -48px -9px;

---

Related Topics