How to add a border-bottom-image with css
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/