Adding background to h1, only on apty space

Question

I'm trying to achieve this kind of effect

Basically, I want the background for my heading to span across the available space, but not under the text. The problem is that this needs to be dynamic as the text can be in multiple languages. I can't simply put another background in a separate span for the text, since the overall background used a pattern image, and it can't just randomly start and stop depending on the length of the text.

I hope i made myself clear enough!

EDIT: since the example was not clear enough, here is another one:

Answer 1

If you want to support the maximum number of browsers, then you need to add some additional markup for this to work:

http://tinker.io/b6848

<h1><span>Header Text</span><span/></h1>

body {
    background: url(http://placekitten.com/600/400);
}

h1 {
    display: table;
    width: 100%;
}

h1 span {
    display: table-cell;
    white-space: pre;
}

h1 span:last-child {
    background: black;
    width: 100%;
}

There is a way to do this without additional markup using Flexbox, but it currently only works in Chrome, Opera, IE10, Firefox builds with experimental Flexbox support turned on, and maybe Safari.

Answer 2

Put the <h1> in a wrapper.

<div class="wrapper">
    <h1>This is some text</h1>
    <div class="background"></div>
</div>

Then style the background as table-cell with 100% width.

div.wrapper {
    display: table;
    width: 100%;
}

div.wrapper h1 {
    font-family: sans-serif;
    font-size: 20px;
    color: #056;
    white-space: nowrap;
    margin: 0 1em;
}

.background {
    background-color: #000;
    display: table-cell;
    width:100%;
}

See DEMO.

Answer 3

just put h1 into div

<div class="header">
    <h1>Title</h1>
</div>

and then stylize it http://jsfiddle.net/yh6Nn/

Answer 4

If you want a pure CSS hack, you may want to explore :after pseudo-element and content property.

http://jsfiddle.net/FYDXr/2/

I have no idea how to make it fill remaining space, though.