CSS background image not positioning bottom - html

Question

I'm having an odd issue happen when trying to position an SVG at the bottom of a div:
http://jsfiddle.net/GsPhA/2/
The svg source is listed below:
<?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>
How can I get the svg to appear below the text (like a border-bottom)?
I'm not entirely fussed about earlier browsers, if it requires CSS 3 properties I'm happy!
EDIT: If there is no better way than absolute positioning, I will just add another div below to provide the effect.
EDIT 2: I'm not sure what I need to do differently with SVG, but positioning bottom with PNG works just fine: http://jsfiddle.net/YXRQX/1/
Is there anything I need to specify in the SVG code so it works properly?
EDIT 3: Final working jsFiddle here: http://jsfiddle.net/GsPhA/4/ Thank you To Ryan for the pointer!

Answer 1

Done it! Thanks to Ryan's pointer, I've added the background-size css property to fix the size to 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;
}​
In the end, the SVG was resizing itself based on the size of the container it was being the background for.

Answer 2

As long as both are in the same container, the text should go above the SVG object like below:
<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>