背景图片放大Firefox

Question

While I was working on the project I faced with the problem of scaling in firefox under an operating system windows. If you change the scale of the browser page with a 100% up to 90% (for example), cut off the background-image, the problem appears only in firefox and only in windows or ubuntu, on mac os is working correctly. Possibly someone faced and will suggest how you can fix this bug.

example: http://jsfiddle.net/uL53nd7z/1/

div {
    background-image: url(http://oi60.tinypic.com/jal5wh.jpg);
    background-repeat: no-repeat;
    height: 23px;
    width: 23px;
}

Answer 1

You can add relative units to your height and width with background-size: cover so your image take all the content of your div. Depending on your target audience you can use em or rem so they gonna "follow" the modification of a page.

My code :

html {
    font-size: 12px;
}

div {
    background-image: url(http://oi60.tinypic.com/jal5wh.jpg);
    background-repeat: no-repeat;
    height: 1.916666666666667rem; /*23/12*/
    width: 1.916666666666667rem;
    -webkit-background-size: cover;
    background-size: cover;
}

Result jsFiddle