background-position won't work in Firefox/IE

I am using background-position and it works fine in Chrome but on Firefox and IE it doesn't work as it should.

.badge {
background: url(badge.png) no-repeat;
background-position: 0px 1px;
display: inline-block;
color: #9e988e;
font-size: 12px;
padding-left: 15px;

What shall I use to make it same in all browsers?

JSFIDDLE

Answers


Internet Explorer does this with background-position-x or background-position-y. Firefox doesn’t support that..


just came across a similar issue today.

This can get a little weird, but try adding this to your style.

Example background-position-x: 54%; background-position-y: 10%;

You may have to mess around with the exact position, but most browsers accept it.


Need Your Help

Asio and HTTP keep-alive

c++ http asynchronous boost-asio keep-alive

I'm trying to implement an web server using asio, but in spite of setting the acceptor as keep-alive, when I receive a connection, after I send the response the connection socket is always closed, ...