CSS Background-position Chrome

Question

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.

Answer 1

Add this:

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

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

Answer 2

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

Hope its help

Answer 3

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?

Answer 4

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.

Answer 5

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.

Answer 6

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)

Answer 7

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;
}