CODEWITHSUNDEEP
htmlimagecss
Ravenous Raven Design
Ravenous Raven Design

Reputation: 141

How to add a border-bottom-image with css

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);
}

enter image description here

Upvotes: 7

Views: 29298

Answers (3)

sunil rawat
sunil rawat

Reputation: 31

work for me ....

.entry-title{
    border-bottom: 20px solid #000;
    border-image:url('bottom.jpeg');
    border-image-repeat: round;
    border-image-slice: 300;
    text-align: center;
    margin: 0px auto;
    width:70%;
}

Upvotes: 1

Jared Farrish
Jared Farrish

Reputation: 49248

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/

Upvotes: 11

Durthar
Durthar

Reputation: 167

From the link you provided (http://www.css3.info/preview/border-image/)

border-image currently works in Safari and Firefox 3.1 (Alpha).

Per my understanding, "border-bottom-image" still doesn't work in the latest version of Google Chrome (natively). But "border-image" does. And you can define width for each individual portion using the (top right bottom left) protocol:

.entry-title{
border-image: url(images/title-borderbottom.jpg);
border-image-width: 0 0 10px 0;
border-image-repeat: stretch;
}

Details: http://www.w3schools.com/cssref/css3_pr_border-image.asp

Upvotes: 1

Related Questions