Как подчеркнуть текст снизу картинкой?

Question

[Максим Бекин]

Ниже верстка, во второй колонке есть слова "до 25 мая", их нужно подчеркнуть, на верстке это сделано рисунком, обычное подчеркивание не подойдет. Как мне для данного спана задать нижнее подчеркивание, но в качестве подчеркивания использовать вырезанную картинку?
Сделал через background, но картинка на текст лезет:
#podcherk{
background:url(../Images/Ln-PlusBank_07.png) bottom no-repeat;
background-position:bottom;
}

Вот такая верстка:
       <div class="container-fluid baner">
            <div class="row"> <!-- строка хедера сбанером и преимуществами-->
            	<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 text-center">
                	<h1>Рассчетно-кассовое обслуживание в Москве</h1>
                </div>
            	<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12 text-center">
                	<h4>При открытии счета <span id="podcherk">до 25 мая</span> три месяца бесплатного обслуживания</h4>
                </div>
            	<div class="col-lg-12 col-md-12 col-sm-12 col-sx-12">
                </div>
            </div><!-- строка хедера сбанером и преимуществами-->
  	   </div>

Answer 1

[Максим Бекин]

Все нашел решение - вот так надо:

#podcherk{
	border-style: solid;
	border-width: 0px 0px 10px;
	-moz-border-image: url(Ln-PlusBank_07_2.png) 0 0 10 stretch;
	-webkit-border-image: url(Ln-PlusBank_07_2.png) 0 0 10 stretch;
	-o-border-image: url(Ln-PlusBank_07_2.png) 0 0 10 stretch;
	border-image: url(../Images/Ln-PlusBank_07_2.png) 0 0 10 fill stretch;
}

И получается просто супер.

Answer 2

[ukoHka]

https://webref.ru/css/border-image
Картинок нет, поэтому предположу, что вам нужно вот это.

Answer 3

[Ankhena]

Плохо вижу, что на картинке нарисовано.

Если там просто плоска, то - фон градиентом.
Если что-то сложнее и именно картинка, то регулируйте положение с помощью background-position

Answer 4

[romy4]

сделать background-position:bottom; не bottom а конкретное значение