CSS фоновое изображение не позиционируется снизу

Question

При попытке разместить SVG внизу элемента div у меня возникает странная проблема:

http://jsfiddle.net/GsPhA/2/

Источник svg указан ниже:

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
        <stop offset="0" stop-color="#FFF" />
        <stop offset="0.1" stop-color="#FFF" />
        <stop offset="0.5" stop-color="#B1B1B1" />
        <stop offset="0.9" stop-color="#FFF" />
        <stop offset="1" stop-color="#FFF" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="1px" style="fill:url(#grad)" />
</svg>

Как я могу заставить svg отображаться под текстом (например, в виде рамки снизу)?

Я не совсем обеспокоен более ранними браузерами, если для этого требуются свойства CSS 3, я счастлив!

РЕДАКТИРОВАТЬ: Если нет лучшего способа, чем абсолютное позиционирование, я просто добавлю еще один div ниже, чтобы обеспечить эффект.

РЕДАКТИРОВАТЬ 2: Я не уверен, что мне нужно делать по-другому с SVG, но позиционирование дна с помощью PNG работает просто отлично: http://jsfiddle.net/YXRQX/1/

Что-нибудь нужно указать в коде SVG, чтобы он работал правильно?

РЕДАКТИРОВАТЬ 3: Окончательная работа jsFiddle здесь: http://jsfiddle.net/GsPhA/4/ Спасибо Райану за указатель!

Answer 1

Готово!Благодаря указателю Райана, я добавил свойство background-size css, чтобы зафиксировать размер до 1px high:

.ucp-controls {
    text-align: center;
    margin-top: 10px;
    padding-bottom: 2px;
    margin-bottom: 5px;
    color: #242424;
    cursor: default;

    background: url('http://priddle.serveblog.net/sums2/images/header/line.png') bottom no-repeat;

    background-size: 100% 1px; // The key line; preserves the width but locks the height.
    font-family: Arial;
}​

В конце SVG изменял свой размер в зависимости от размера контейнера.быть фоном для.

Answer 2

Пока оба находятся в одном контейнере, текст должен находиться над объектом SVG, как показано ниже:

<center>
<p>Sample Text Here</p>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
      <linearGradient id="grad" x1="0" y1="0" x2="100%" y2="0">
        <stop offset="0" stop-color="#FFF" />
        <stop offset="0.1" stop-color="#FFF" />
        <stop offset="0.5" stop-color="#B1B1B1" />
        <stop offset="0.9" stop-color="#FFF" />
        <stop offset="1" stop-color="#FFF" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="100%" height="1px" style="fill:url(#grad)" />
</svg>
</center>