Reputation: 141
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);
}
Upvotes: 7
Views: 29298
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
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.
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/
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
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