0

I'm trying to add a ragged boarder to a parchment background. This is my CSS

#wrap
{
    width:52em;
    margin:30px auto; /* centers the container */
    background-image: url(../images/parchment.gif);
}
.borderimage #wrap
{
    border-width: 10px;
    -chrome-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    -moz-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    -o-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    -webkit-border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
    border-image: url(../images/parchment_border.png) 10 10 10 10 repeat;
}

The .borderimage class is part of modernizr.

When it's rendered, the background image covers the boarder image. If I set the background image to none, I see the boarder image at the borders. I had this working a couple of years ago, but it failed some time ago. I don't if it was because of a change I made or browser upgrades. A web search didn't turn up anything useful.

4

1 回答 1

0

尝试background-size: contain;放入#wrap

于 2013-04-04T03:54:29.420 回答