css - 適切なスペースでのみ、h1に背景を追加する

Question

こんな効果を狙っています

基本的に、見出しの背景は、テキストの下ではなく、使用可能なスペース全体に広げたいと考えています。問題は、テキストが複数の言語である可能性があるため、これを動的にする必要があることです。背景全体がパターン画像を使用しているため、テキストの別のスパンに別の背景を単純に配置することはできず、テキストの長さに応じてランダムに開始および停止することはできません。

私は自分自身を十分に明確にしたことを願っています！

編集：例が十分に明確ではなかったため、別の例を次に示します。

Answer 1

<h1>ラップに入れます。

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

table-cell次に、背景を 100% 幅でスタイルします。

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%;
}

デモを参照してください。

Answer 2

h1をdivに入れるだけです

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

そしてそれを様式化しますhttp://jsfiddle.net/yh6Nn/