Фоновое изображение выше границы

Question

Я хотел бы сделать это текстовое поле

Как вы можете видеть, есть две части DIV - фоновое изображение в нижней части и границы, что у меня есть уже сделано:

HTML:

<div class="person"> 
<p>Text Text Text</p> 
</div> 

CSS:

.person { 
    background: url('../images/results_title.png') repeat-x bottom; 
    border: 1px solid #000000; 
    min-height: 32px; 
} 

Проблема в том, что граница над фоновым изображением. Фон в нижней части должен быть выше границы (= внизу должен быть только изображение без каких-либо границ).

ВАЖНО: На картинке есть текст.

Answer 1

Как насчет добавления границы в <p>? Вы можете иметь границу справа и слева от границы на p, с внутренним отступом, чтобы сохранить текст вдали от поля. Если у <p> есть другой макет, который бы помешал этому, заверните их в div.

Смотрите эту скрипку, например: http://jsfiddle.net/56TqY/1/

красный и голубой только для examplify, и, очевидно, я использую свой фон с текстом, но я думаю, вы получите идею.

Answer 2

Я всегда ненавижу добавлять больше разметки, но я думаю, что this должно быть тем, что вы ищете.

Я просто добавил обертку, так что вы можете добавить отступы между border и background-image