CSS Background-position Chrome

Ok so I have set a background-position property on an element through a class declaration. And for some reason chrome, and I'm assuming all webkit browsers, ignore the background-position property.

I have like so

.buttonholder {
background-position: -175px 0px;
}

and

<span class='buttonholder'>
<a href='index.php'>Home</a>
</span>

I took out the firebug type tool in chrome and for some reason the tag comes up like so:

<span class='buttonholder' style='background-position: 0% 0%; '>

Even though there is no specific style declaration inside the elements tag. Any advice would be greatly appreciated

Edit: Apparently people think I am trying to use this as a way to position the element. Which is 开发者_如何学运维false. I'm trying to position a background image.

Add this:

background-position-x: -175px;
background-position-y: 0px;

Also see: http://code.google.com/p/chromium/issues/detail?id=57963

In chrome, to solve this bug, you need to use percent in background position. When change position will works fine.

Hope its help

Incidentally, I had a similar issue to this, where I use JavaScript to dynamically reposition an element using the jquery('[element]').css('background-position') property and it wasn't showing up in Chrome.

I found that I had also had the element declared in the CSS in an external stylesheet:

[element] {
  background: #becfd3 url([background image]) no-repeat 140px 60px;
}

I ended up removing the 140px 60px part of the element in the stylesheet and it worked for me. Maybe it'll work for you?

If you wanna positionate something check for position: absolute | relative | fixed | static, and add top, and left according to w3c standard. I have no idea of background-position, but I'm pretty sure that what you do with this property can also be handle with my opinion.

The background-position property is used to position background images only, not the elements themselves. If you'd like to learn CSS positioning in ten steps, see http://www.barelyfitz.com/screencast/html-training/css/positioning/

Reference for background-position: https://developer.mozilla.org/en/CSS/background-position (info applies to Mozilla and Webkit)

I was playing around with this and found chrome and other webkit browsers to render background positions without any issues. I used a single background declaration like this:

background: url(http://www.example.com/image.png) -175px 0;

Perhaps you could declare the style in the same way and see if that works.

This one almost works for me. It positions the element to the right side, but it doesn´t take the .3rem into consideration in Chrome browser. The background-position-y works in Chrome as well.

#email.active {
    background-image: url(./images/icon-error.svg);
    background-repeat: no-repeat;
    background-position-x: right, .3rem !important;
    background-position-y: center;
}

In Safari it has worked in the following way for me, I didn´t have any issues with the positioning in Safari.

#email.active {
    background-image: url(./images/icon-error.svg);
    background-repeat: no-repeat;
    background-position-x: right .3rem !important;
    background-position-y: center;
}