CSS3 background-origin property does work in firefox?

Posted by hh54188 on Stack Overflow See other posts from Stack Overflow or by hh54188
Published on 2011-01-02T12:48:27Z Indexed on 2011/01/02 12:53 UTC
Read the original article Hit count: 217

I want use CSS3 property to make a complicated background image which with corner shadow and so on.Including background image,left border image,right border image.So,for the <div class="outer"></div>I write the CSS below:

    .outer
    {
        background:url("title_main.png");
        background-repeat:repeat-x;

        background-clip: content;
        background-origin:content;
        -moz-background-clip: content;
        -moz-background-origin: content;
        -webkit-background-clip: content;
        -webkit-background-origin:content;


        -webkit-border-image:url("title_border.png") 0 15 0 15 stretch;
        -moz-border-image: url("title_border.png") 0 15 0 15 stretch;
        border-image:url("fancy_title.png") 0 15 0 15 stretch;
        border-width:0 15px ;

        width:80px;
        height:32px;
    }

In chrome browser it work well like:alt text

But the firefox doesn't like this:alt text

Why would this happened?How can I fix this?Make the firefox effect like the chrome?

© Stack Overflow or respective owner

Related posts about css3

Related posts about background-image