La repetición de las imágenes con la :después de pseudo-elementos

Un poco chapucero y se implican agregar overflow-x:hidden; para el elemento principal, pero debe hacer el truco:

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

Puede establecer los atributos de su después de pseudo elemento. Lo que yo haría es establecer el contenido a «» (vacío) y, a continuación, establecer la anchura y la altura a la pseudo elemento. Usted puede configurar el fondo de las reiteradas gif como normal entonces.

h2:after {
  content: "";
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}

Cuando se utiliza content:url() presionado clase crear un img elemento. Usted necesidad de utilizar background en este caso. Como lo dijo Erik.

Pero si el tamaño de su texto en el título no es conocido (aka contenido dinámico), a continuación, pseudo elemento no es un buen trabajo a su alrededor. Usted puede utilizar un marcado así:

<h1><span>your text content</span></h1>

Y, a continuación, agregar el fondo repetitivo a h

h1{ background:'url(img/imagehere.gif) repeat-x';}

Para ocultar el fondo, en parte, a que el texto aparece de hacer el span‘s fondo en un color sólido

span{background:white} 

Actualización:

si usted tiene una imagen de fondo en virtud de su h1, entonces usted puede hacer esto:

Mismo HTML: <h1><span>your text content</span></h1>

CSS:

decir que su body tener una imagen de fondo:

body{background-image:(foo)}

a continuación, desea bar para ser su imagen de repetir el título. Usted debe hacer esto:

h1{background:url(bar)}

Y agregar mismo fondo de su body a la span que contiene el texto:

h1 span{background-image:(foo)}

Esto podría resolver su problema. Mira este El violín a ver en acción. No dependía de su tamaño de texto o cualquier otra cosa.

Nota: si está utilizando un span entonces usted debe hacer es dispaly:inline-block

Actualización:

La base de su solicitud me repensar esto. He utilizado tables este tiempo. Código sin explicación:

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

Ver en acción<

La respuesta por encima de Erik Hinton funcionará si se agrega «display:block» de la declaración, de la siguiente manera:

h2:after {
  content: "";
  display:block;
  height:20px;
  width:400px;
  background:url('img/imagehere.gif') repeat-x top left;
}