CODEWITHSUNDEEP
htmlcssfirefox
Ovilia
Ovilia

Reputation: 7310

firefox background position percentage not working

I merged a set of images into a large one to save HTTP requests and used background-position in percentage to adjust which image to use. Percentage is used rather than pixel since the width of images is controlled by the parent element.

The merged image is like:

As about the rendered result, please refer to the first five images in http://zhujianer.com/ .

It works fine on Chrome. From Console, we can see the CSS selector.

But it unexpectedly uses the same image in Firefox. (Tested on FF 17.0.1 on Mac) From Firebug, the selector is there, but the attribute background-position-x: -200%; is gone. And even if I add it, FF will automatically removes it. So it seems that this is regarded as illegal to FF.

Full CSS code is (using SCSS):

.process {
    width: 120px;
    height: 120px;
    max-width: 100%;
    border-radius: 60px;
    margin: 0 auto;

    .image-block {
        width: 90%;
        height: 90%;
        background-size: 500%;
        margin: 0 auto;
        position: relative;
        top: 5%;
        background-image: url('../img/process.png');

        &:hover {
            background-position-y: 100%;
        };
    }

    &#process-idea .image-block {
        background-position-x: 0;
    }

    &#process-design .image-block {
        background-position-x: -100%;
    }

    &#process-code .image-block {
        background-position-x: -200%;
    }

    &#process-launch .image-block {
        background-position-x: -300%;
    }

    &#process-monitor .image-block {
        background-position-x: -400%;
    }
}

Upvotes: 1

Views: 324

Answers (1)

Caelea
Caelea

Reputation: 2348

FF doesn't know about background-position-x, he knows only about background-position. So you can write this like:

#process-section #process-idea.process .image-block {
    background-position: -200% 0;
}

Upvotes: 3

Related Questions