CSS Background : Adding left padding via using repeat-x with single element - html

Question

I try to create heading like this...
Title --------------------
This line with a custom image background
HTML :
<h2>Title</h2>
CSS :
h2 {background:url('line.png') repeat-x 15px 10px;}
Result :
Live : http://jsfiddle.net/5G2aq/
I try to repeat this image with X-axis and add some padding into the left.
But it doesnt work, 15px doenst work... or what ?
PS :Try to do with a single element <h2>, not :after or full-long image
Any trick ?

Answer 1

Do it like this, use :after pseudo with content: ""; and be sure you use display: block;, now we use position: absolute; and assign position: relative; to the container element. Last but not the least we use overflow: hidden; so that we don't get dirty scroll.
Demo
h2 {
position: relative;
overflow: hidden;
}
h2:after {
position: absolute;
height: 2px;
content: "";
display: block;
width: 100%;
top: 50%;
left: 60px;
background:url(http://oi39.tinypic.com/m7t8xw.jpg) repeat-x;
}
Coming to your solution, you are using repeat-x, so you won't see the background-position changing on the x axis as the image is repeating, if you want to go for this approach, you shouldn't repeat.
Even better approach
Demo 2 OR Demo 3 (Using your image)
<div><span>Hello</span></div>
div {
border-top: 1px solid #000;
margin: 20px;
position: relative;
}
div span {
display: block;
position: absolute;
top: -12px;
background: #fff;
padding-right: 10px;
}
The above way will be title width independent, I would've chosen this way
Note: You can replace div with h2