This project is archived and is in readonly mode.

#151 ✓invalid
ronin-24111 (at lighthouseapp)

getting a background-position

Reported by ronin-24111 (at lighthouseapp) | June 21st, 2008 @ 04:08 PM | in 2.0 (closed)

If you set a background-position via CSS for a element in Firefox 2, element.getStyle('background-position') returns nothing.

It works in Firefox 3 + Safari.

Comments and changes to this ticket

  • Bas Wenneker

    Bas Wenneker June 24th, 2008 @ 04:41 PM

    It has something to do with the following Mozilla bug:



    <div id="el">Has background-position 'right top' in an external stylesheet</div>
    <div id="el2" style="background-position:right top;">Has background-position in the style attribute</div>


    window.addEvent('domready', function(){

    I've tested this with *FF2 win*:

    alert($('el').getStyle('background-position')); // => alerts ""
    alert($('el2').getStyle('background-position')); // => alerts "right top"

    Opera 9.5 win

    alert($('el').getStyle('background-position')); // => alerts "1263px 0px"
    alert($('el2').getStyle('background-position')); // => alerts "100% 0%"

    IE6, IE7, IE8 win

    alert($('el').getStyle('background-position')); // => alerts undefined
    alert($('el2').getStyle('background-position')); // => alerts "right top"

    I included an example. I have not found a solution for this problem yet.

  • Mahdi

    Mahdi October 22nd, 2008 @ 06:04 PM

    I have the same problem with mootools 1.2

    It's like 4 month from the time this ticket was new. Is there any patch planned?

  • Daniel Steigerwald

    Daniel Steigerwald October 22nd, 2008 @ 07:05 PM

    Cannot be fixed for FF2. You cant retrieve background position, so moo can not fix it. I hope FF2 die soon.

  • Mahdi

    Mahdi November 9th, 2008 @ 10:20 PM

    Thanks to css, I jumped this bug; but it doubled the css I had to write for a simple sprite menu... Mohammad M. Saffari

    On Wed, Oct 22, 2008 at 9:36 PM, Lighthouse support@lighthouseapp.comwrote:

  • Jan Kassens

    Jan Kassens November 9th, 2008 @ 11:05 PM

    • State changed from “new” to “invalid”

    closing as it seems there's no solution for this problem.

    in case anyone finds an update, we love to see a patch here.

  • Fabian

    Fabian July 31st, 2009 @ 11:24 PM

    • Assigned user changed from “Valerio” to “Jan Kassens”
    • Tag set to internet explorer, 1.2.3, background-position

    IE6, IE7, IE8 win @@@ javascript alert($('el').getStyle('background-position')); // => alerts undefined @@@

    I just ran into this problem, but I could fix it (for me) with some small changes. Maybe soneone can review it and tell me, if there is another way so I get a valid return?!

  • Sebastian Markbåge

    Sebastian Markbåge August 1st, 2009 @ 12:02 AM

    • Assigned user changed from “Jan Kassens” to “Sebastian Markbåge”
    • State changed from “invalid” to “open”

    FF2 is essentially dead. The value returned by background-position isn't consistent in remaining browsers though. We also need to be able to calculate an exact value, such as percentages or pixels consistently. Not just whatever computed style returns.

    To do this, we need to know the size of the background image which isn't totally easy. But it can be done. It'll just take some time to refine this technique and the code involved.

  • Cyantist

    Cyantist April 29th, 2010 @ 04:07 PM

    I know this is a bit of an old ticket, but I had the same problem as mentioned above, I needed to retrieve the background position. I have found a solution, so thought I would post it here to help anyone else in future.

    Firstly, "background-position-x" and "background-position-y" is not supported in FF, it only supports "background-position".

    With this in mind, all browsers, except IE, will allow the retrieval of the background position with "getStyle('background-position')". However, IE will let you get both "background-position-x" and "background-position-y".

    So, given an appropriate element, the following function returns the info!

    function getBackgroundPosition(el) {
        if (Browser.Engine.trident) {
            var pos=el.getStyle('background-position-x')+" "+el.getStyle('background-position-y');
        } else {
            var pos=el.getStyle('background-position');
        return pos;

    Granted it ain't rocket science and could probably be improved tenfold. Also, I do not have access to a myriad of browsers, but it seems fine in IE 6, 7, FF, Safari and Chrome.

  • Sebastian Markbåge

    Sebastian Markbåge April 29th, 2010 @ 04:39 PM

    Yes, this is the same patch as Fabian posted above. I'd add a lookup for named values so you consistently get either percentages or pixels (like the modern browsers do).

    var namedPositions = { left: '0%', top: '0%', center: '50%', right: '100%', bottom: '100%' };
    function getBackgroundPosition(el){
        if (Browser.Engine.trident){
            var x = el.getStyle('background-position-x'), y = el.getStyle('background-position-y');
            return (namedPositions[x] || x) + ' ' + (namedPositions[y] || y);
        } else {
            return el.getStyle('background-position');

    This seems like a nice addition.

    Now, conversion between percentages and pixels require that you know the size of the background-image, which requires it to load first. That makes it essential unfeasible. The addition of further options in CSS3 makes it even more complex. So, unit conversion is a won't fix for background-position.

  • Christoph Pojer

    Christoph Pojer September 5th, 2010 @ 01:00 PM

    • Assigned user changed from “Sebastian Markbåge” to “Valerio”
    • Milestone order changed from “0” to “0”
  • ibolmo

    ibolmo January 19th, 2012 @ 07:49 AM

    • State changed from “open” to “invalid”

    Moved to Github Issues:

    Please use Github Issues, since Lighthouse has been deprecated.

Create your profile

Help contribute to this project by taking a few moments to create your personal profile. Create your profile »

Shared Ticket Bins