87

I'm worried about background-position-x and background-position-y. Gecko (Firefox) and Presto (Opera) don't support them, but Webkit (Chrome, Safari) does...

Does anyone know (with official references) if this is (or will be) included in the standard?

Guile
  • 1,473
  • 1
  • 12
  • 20
  • Not found in the specification: http://www.w3.org/TR/css3-background/#the-background-position – Rob W Mar 11 '12 at 09:18
  • @Joseph I did and didn't find things from W3C. But it was the same for a while ago... And now it is in standards I guess (I didn't verify) – Guile Mar 15 '12 at 17:25
  • You can [vote on this issue](https://bugzilla.mozilla.org/show_bug.cgi?id=550426) to try and convince the Firefox developers to include it in Gecko – Andy E Jun 20 '13 at 08:40
  • 1
    Firefox is the only major browser that does not support this. Go to https://bugzilla.mozilla.org/show_bug.cgi?id=550426 and vote. – Semra Dec 08 '12 at 09:40
  • These properties are non-standard. Also note that Webkit (Safari, Chrome) implements them but they return different values than the standard background-position if the user zoomed the page. While background-position remains consistent when zooming, background-position-[xy] adjusts to the zoomed currently rendered coordinates. Tested on Chromium 34.0.1847.116 – Grzegorz Luczywo Jul 16 '14 at 17:52
  • Please consider the new answer with April 2014 update from W3C. These properties ARE now part of the standard. – Deleplace Oct 01 '14 at 13:10

3 Answers3

129

Splitting background-position into -x and -y was proposed for CSS 3 but it got rejected as the working group “considered the use case too weak to introduce new properties for.” Additionally, there seemed to be some ambiguity concerns with multiple background images and CSSOM, the API behind CSS. I’m not sure how WebKit and Trident did implement them and how they addressed these concerns.

The CSS WG blob has just reported yesterday that there will be “no change to background-position or transform-origin syntaxes.” The reason is probably due to not getting any further delays.

Maybe it will get added to CSS 4. There is a current thread on the www-style@w3.org mailing list that you might find interesting.

Update    So apparently these properties have been approved for CSS 4 (see [CSSWG] Minutes Telecon 2014-04-16):

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

Gumbo
  • 643,351
  • 109
  • 780
  • 844
  • 1
    OK, with all your links, I'm now sure that it won't be standard for a long time! Thanks! – Guile Mar 15 '12 at 17:25
  • 8
    Good answer, not the one I wanted to hear though. :/ Upvoted. – Madbreaks Jun 06 '12 at 18:49
  • 1
    It seems that only Firefox doesn't support it, since Opera uses Blink rendering engine http://snook.ca/archives/html_and_css/background-position-x-y. Maybe it could be great that w3c standardizes what browsers have already implemented :/ – tzi May 26 '14 at 13:30
  • Please consider the new answer with April 2014 update from W3C. These properties ARE now part of the standard. – Deleplace Oct 01 '14 at 13:14
  • what about the real support for this? – Vandervals Jun 08 '15 at 10:29
  • @egid So true! In fact I got here researching options to make my sprite handling code simpler! – Stijn de Witt Sep 09 '15 at 13:02
29

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.

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Razor
  • 27,418
  • 8
  • 53
  • 76
  • 2
    Browser support is [pretty good](http://caniuse.com/#search=background-position), however: Firefox doesn't support it at all :( – Husky Feb 17 '16 at 12:52
1

I guess in some sense you've already answered your own question. No, both background-position-x and background-position-y are nonstandard.

shabunc
  • 23,119
  • 19
  • 77
  • 102
  • 7
    Browser support (as history and Internet Explorer shows) doesn't have necessarily have anything to do with the standards – Yi Jiang Mar 11 '12 at 10:01
  • that's exactly why I'm added 'in some sense' ) nevertheless, those properties are non-standard. Though quite useful ) – shabunc Mar 11 '12 at 10:10
  • Well I would have needed it, but as they won't be included in any standard for a long time, I prefer to have a longer CSS that works in every browser, that a shorter CSS that is buggy for FF, Op. – Guile Mar 15 '12 at 17:27