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...

score 23 · Accepted Answer · answered Jun 12 '12 at 12:32

23

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

answered Jun 12 '12 at 12:32

duri

14,991
3
44
49

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`). – JAB Jun 12 '12 at 12:37
Thanks! So the correct way is to use background-position only? Or do other browsers need the -x -y ? – Astronaut Jun 12 '12 at 12:39
6

background-position: 50% 50%; works on every browser, forget about -x -y as duri said, they are not widely supported – Luca Jun 12 '12 at 12:41
2

@JAB Unfortunately, they have never been in any spec. See http://www.w3.org/Style/CSS/Tracker/issues/9 – duri Jun 12 '12 at 12:42
Ah, I see. And according to that document there aren't enough situations where that behavior would be useful. – JAB Jun 12 '12 at 12:45
@JAB, also see http://stackoverflow.com/questions/9653685/is-background-position-x-background-position-y-a-standard-w3c-css-property – Kirby Nov 24 '15 at 17:27
@Kirby Well what do you know, `-x` and `-y` now are part of the standard. – JAB Nov 25 '15 at 03:53

How-to set background-position-x?

1 Answers1