7

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

Improve this question
8
  • You could try setting it as the border image, like the tutorials you referenced show how, then just having the bottom border thickness being greater than zero. Commented Apr 20, 2015 at 20:30
  • Try -webkit-border-bottom-image or use pseudo element :after Commented Apr 20, 2015 at 20:31
  • 1
    I don't think border-image is what you want, primarily because the center no-repeat directive you want is not supported (the way you want it; stretch is closest, but it's not really the same). This is as close as I got: jsfiddle.net/mh66rvbo You could use background-image instead, with a bottom padding, if that doesn't disrupt other background styles on the elements. See this very explanatory entry from CSS Tricks: css-tricks.com/understanding-border-image Commented Apr 20, 2015 at 20:35
  • Here is another StackOverflow thread that asks this: stackoverflow.com/questions/10164393/… Commented Apr 20, 2015 at 20:36
  • Have you tried border-bottom-style: solid;? Commented Apr 20, 2015 at 20:37

3 Answers 3

Reset to default
11

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you so much Jared!! That fixed my problem. I was playing around with the border image thing so much, getting it to "almost" work, but never really looking right. This solved it. You are a lifesaver :)
1

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

Improve this answer

5 Comments

border-image-repeat: none is not a valid value.
Thanks for pointing that out @JaredFarrish - "stretch" should work in this case.
The downside, of course, is that it will deform the image if it's not setup to be stretched, which may or may not be desirable.
True. Then, like you pointed-out, it shouldn't be rendered a "border" as borders inherently stretch around the object.
Yes, I played with stretch and it was always funky looking. Never pixel perfect.
1

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%;
}
Improve this answer

1 Comment

Thank you for your answer. By such an old question however it very much helps if you provide some explanation as to how your solution differs from the old ones, and why it is preferable.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.