What I’m trying to do
I want to create an underline, but one with an image in the beginning and on the end. See the example:
This is my current H1 style:
h1, .markdown-rendered h1, .HyperMD-header-1{
text-transform: uppercase;
border-bottom: 3px solid #CFAD8D;
width: 100%;
display: block;
text-shadow:
-1.5px -1.5px 0 #d2d2c8,
0 -1.5px 0 #d2d2c8,
1.5px -1.5px 0 #d2d2c8,
1.5px 0 0 #d2d2c8,
1.5px 1.5px 0 #d2d2c8,
0 1.5px 0 #d2d2c8,
-1.5px 1.5px 0 #d2d2c8,
-1.5px 0 0 #d2d2c8;
}
Things I have tried
I’ve tried the border-image css property and the background-image properties but they don’t seem to work. The two images (border-left.png and border-right.png) are in the sale folder as the css for the theme I’m using. For example:
border-bottom: 3px solid #CFAD8D;
padding: 15px;
border-image: url(border-left.png) 30 round;
But the image doesn’t show up.
How can I achieve the example as seen in the image?