Repeating images with the :after pseudo-elements - html

Question

I would like to put headlines in my site like this: http://cl.ly/0m3F0j392e0G1n0s0T34
What i'd ideally like to do is use text for the headline and then have a 10px by 10px gif repeat horizontally after it.
EDIT: I should add that I would like to use a textured background so I can't set any solid colours to the h2 element.
I have been able to add in the gif after the headline but I can't get it to repeat, even if i add repeat-x. Here's the code i used:
h2:after {
content: 'url(img/imagehere.gif) repeat-x';
}
Are there any workarounds for this or any alternate methods? I'd rather not resort to slicing the entire headline as an image. I've thought about floating the headline to the left then floating an empty div to the right with the gif as a repeating background image but I figure this is what the :after pseudo-element is for, right?

Answer 1

A little hacky and will involve adding overflow-x:hidden; to the parent element, but should do the trick:
h2 {
position: relative;
padding-right: 10px;
float: left;
}
h2::after {
content: '';
position: absolute;
left: 100%;
right: 9999px;
background: url(image.gif);
height: 10px;
width: 9999px;
}

Answer 2

You can set any attributes to your after pseudo element. What I would do it set the content to "" (empty) and then set a width and height to the pseudo element. You can set the background to the repeated gif as normal then.
h2:after {
content: "";
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}

Answer 3

When you use content:url() pressed class create an img element. You need to use background in this case. Like what Erik said.
But if size of your text in heading is not known (aka dynamic content) then pseudo element is not a good work around. You can use a markup like this:
<h1><span>your text content</span></h1>
And then add the repetitive background to h
h1{ background:'url(img/imagehere.gif) repeat-x';}
To hide background in part that text apears make the span's background a solid color
span{background:white}
Update:
if you have a background image under your h1, then you can do this:
Same HTML: <h1><span>your text content</span></h1>
CSS:
say your body have a background image:
body{background-image:(foo)}
then you want bar to be your image to repeat after the heading. You should do this:
h1{background:url(bar)}
And add same background your body have to the span containing your text:
h1 span{background-image:(foo)}
This would solve your problem. Look at this Fiddle to see in action. It's not depended on your text size or anything else.
Note: if you are using an span then you should make it dispaly:inline-block
Update:
Based on your request I rethink on this. I used tables this time. Code without explanation:
HTML
<table>
<tbody>
<tr>
<td><h1>Heading</h1></td>
<td class="pattern"></td>
</tr>
</tbody>
</table>
CSS
body{background:url(foo)}
table, tbody, tr{width:100%;}
.pattern{background:url(bar); width:100%;}
See in action<

Answer 4

The answer above from Erik Hinton will work if you add "display:block" declaration, as below:
h2:after {
content: "";
display:block;
height:20px;
width:400px;
background:url('img/imagehere.gif') repeat-x top left;
}