How-to set background-position-x?

Question

How Do i set background-position-x on Opera?

div#logocontainer{
    width: auto;
    height: auto;
    text-align: center;
    line-height: 200px;
    overflow: auto;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../img/WatermarkMP.png);
    background-repeat: no-repeat;
    background-position-x: 50%;
    background-position-y: 50%;
    padding: 10px;
}

I have the following CSS rule, it will display correctly on Chrome and Safari, desktop and mobile versions. But it will not work on Opera, that does not seem to support the background-position-x: 50%; background-position-y: 50%; rules. Do I have to script this so that it's compatible with Opera? How do I work around this to support opera also?

It also does not seem to round jQuery Mobile corners...

Yaya

Does it work on Firefox? – Duhon

Answer 1

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

Higherup

Why is that? To my knowledge, most other compound properties of that sort can be split up into their components across all systems (such as margin consisting of margin-left, margin-right, margin-top, and margin-bottom). – Duhon

Thanks! So the correct way is to use background-position only? Or do other browsers need the -x -y ? – Yaya

background-position: 50% 50%; works on every browser, forget about -x -y as duri said, they are not widely supported – Malita

@Duhon Unfortunately, they have never been in any spec. See w3.org/Style/CSS/Tracker/issues/9 – Higherup

Ah, I see. And according to that document there aren't enough situations where that behavior would be useful. – Duhon

@JAB, also see #9654185 – Klotz

@Klotz Well what do you know, -x and -y now are part of the standard. – Duhon