How to add a border-bottom-image with css

Question

I created the following image to be rendered under all h1 title tags in my website. Trouble is, every tutorial I find online discusses border image property as a all around border.

All I want to achieve is to get this one small image underneath the title, once. No repeat. centered. According to this http://www.css3.info/preview/border-image/ there is a property called border-bottom-image. But I can't seem to get it to display properly.

Google chrome developer tools tells me that this is an unknown property name. If I can't achieve this with the following css3, how can I achieve it?

.entry-title{
border-bottom-image: url(images/title-borderbottom.jpg);
}

Answer 1

Here are two options that allow you to do what you want without resorting to border-image, which is not really built for what you want to do.

background-image + :after

This uses a pseudo-element (:after) to "insert" a block with your given image as the background-image. I think this is probably better than the next option, since it's least disruptive to the element's styling.

.entry-title:after {
    content: "";
    display: block;
    height: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/2/

background-image + padding

This uses padding-bottom to make space for the image, then sticks the image along the bottom of the element, positioning in the center.

.entry-title {
    padding-bottom: 70px;
    background-image: url(http://placehold.it/350x65);
    background-repeat: no-repeat;
    background-position: center bottom;
}

http://jsfiddle.net/mh66rvbo/1/