Lo que quiero es que el fondo verde esté justo detrás del texto, no que sea el 100% del ancho de la página. Aquí está mi código actual:

h1 { 
    text-align: center; 
    background-color: green; 
}

<h1>The Last Will and Testament of Eric Jones</h1> 

Ponga el texto en un elemento en línea , como a <span>.

<h1><span>The Last Will and Testament of Eric Jones</span></h1>

Y luego aplique el color de fondo en el elemento en línea.

h1 {
    text-align: center; 
}
h1 span { 
    background-color: green; 
}

Un elemento en línea es tan grande como su contenido, por lo que debería hacerlo por usted.

Opción 1

display: table;

• no se requiere padre

h1 {
    display: table; /* keep the background color wrapped tight */
    margin: 0px auto 0px auto; /* keep the table centered */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<h1>The Last Will and Testament of Eric Jones</h1>

violín

http://jsfiddle.net/J7VBV/293/

más

display: table le dice al elemento que se comporte como lo haría una tabla HTML normal.

Más información al respecto en w3schools , CSS Tricks y aquí

opcion 2

display: inline-flex;

• requiere text-align: center;en los padres

.container {
    text-align: center; /* center the child */
}
h1 {
    display: inline-flex; /* keep the background color wrapped tight */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Opción 3

display: flex;

• requiere un contenedor padre flexible

.container {
  display: flex;
  justify-content: center; /* center the child */
}
h1 {
    display: flex;
    /* margin: 0 auto; or use auto left/right margin instead of justify-content center */
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

    <div class="container">
      <h1>The Last Will and Testament of Eric Jones</h1>
    </div>

acerca de

Probablemente la guía más popular de Flexbox y a la que me refiero constantemente está en CSS Tricks

Opcion 4

display: block;

• requiere un contenedor padre flexible

.container {
  display: flex;
  justify-content: center; /* centers child */
}
h1 {
    display: block;
    padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

<div class="container">
  <h1>The Last Will and Testament of Eric Jones</h1>
</div>

Opción 5

::before

• requiere ingresar palabras en un archivo CSS (no muy práctico)

h1 {
    display: flex; /* set a flex box */
    justify-content: center; /* so you can center the content like this */
}

h1::before {
    content:'The Last Will and Testament of Eric Jones'; /* the content */
    padding: 5px;font-size: 20px;background-color: green;color: #ffffff;
}

<h1></h1>

violín

http://jsfiddle.net/J7VBV/457/

acerca de

Más información sobre pseudo elementos css :: before y :: after en CSS Tricks y pseudoelementos en general en w3schools

Opcion 6

display: inline-block;

• centrado con position: absoluteytranslateX

• requiere un position: relativepadre

.container {
  position: relative; /* required for absolute positioned child */
}
h1 {
  display: inline-block; /* keeps container wrapped tight to content */
  position: absolute; /* to absolutely position element */
  top: 0;
  left: 50%; /* part1 of centering with translateX/Y */
  transform: translateX(-50%); /* part2 of centering with translateX/Y */
  white-space: nowrap; /* text lines will collapse without this */
  padding:5px;font-size:20px;background-color:green;color:#ffffff;
}

  <h1>The Last Will and Testament of Eric Jones</h1>

acerca de

Más sobre centrarse en transform: translate();(y centrarse en general) en este artículo de trucos CSS

Opcion 7

text-shadow: y box-shadow:

• no es lo que buscaba el OP, pero tal vez sea útil para que otros encuentren su camino aquí.

h1, h2, h3, h4, h5 {display: table;margin: 10px auto;padding: 5px;font-size: 20px;color: #ffffff;overflow:hidden;}
h1 {
    text-shadow: 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green,
                 0 0 5px green,0 0 5px green;
}
h2 {
    text-shadow: -5px -5px 5px green,-5px 5px 5px green,
                  5px -5px 5px green,5px 5px 5px green;
}
h3 {
    color: hsla(0, 0%, 100%, 0.8);
    text-shadow: 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 10px hsla(120, 100%, 25%, 0.5),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1),
                 0 0 5px hsla(120, 100%, 25%, 1);
}
h4 { /* overflow:hidden is the key to this one */
    text-shadow: 0px 0px 35px green,0px 0px 35px green,
                 0px 0px 35px green,0px 0px 35px green;
}
h5 { /* set the spread value to something larger than you'll need to use as I don't believe percentage values are accepted */
  box-shadow: inset 0px 0px 0px 1000px green;
}

<h1>The First Will and Testament of Eric Jones</h1>
<h2>The 2nd Will and Testament of Eric Jones</h2>
<h3>The 3rd Will and Testament of Eric Jones</h3>
<h4>The Last Will and Testament of Eric Jones</h4>
<h5>The Last Box and Shadow of Eric Jones</h5>

violín

https://jsfiddle.net/Hastig/t8L9Ly8o/

Mas opciones

Hay algunas otras formas de hacerlo combinando las diferentes opciones de visualización y los métodos de centrado anteriores.

Un poco tarde para el juego, pero pensé que agregaría mis 2 centavos ...

Para evitar agregar el marcado adicional de un tramo interno, puede cambiar la <h1>propiedad de visualización de blocka inline(catch es que debería asegurarse de que los elementos después de que <h1>sean elementos de bloque.

HTML

<h1>  
The Last Will and Testament of
Eric Jones</h1> 
<p>Some other text</p>

CSS

h1{
    display:inline;
    background-color:green;
    color:#fff;
}

Resultado

JSFIDDLE http://jsfiddle.net/J7VBV/

Un truco muy simple para hacerlo es agregar una <span>etiqueta y agregarle color de fondo. Se verá exactamente como lo desea.

<h1>  
    <span>The Last Will and Testament of Eric Jones</span>
</h1> 

Y CSS

h1 { text-align: center; }
h1 span { background-color: green; }

¿POR QUÉ?

<span> etiqueta en una etiqueta de elemento en línea, por lo que solo abarcará el contenido que simula el efecto.

EDITAR: la respuesta a continuación se aplicaría en la mayoría de los casos. OP, sin embargo, más tarde mencionó que no podían editar nada más que el archivo CSS. Pero dejaré esto aquí para que pueda ser de utilidad para otros.

La consideración principal que otros están descuidando es que OP ha declarado que no pueden modificar el HTML.

Puede orientar lo que necesita en el DOM y luego agregar clases dinámicamente con javascript. Luego peina como necesites.

En un ejemplo que hice, apunté todos los <p>elementos con jQuery y lo envolví con un div con una clase de "color"

$( "p" ).wrap( "<div class='colored'></div>" );

Luego, en mi CSS, apunté <p>y le di el color de fondo y cambié adisplay: inline

.colored p {
    display: inline;
    background: green;
}

Al configurar la pantalla en línea, pierde parte del estilo que normalmente heredaría. Por lo tanto, asegúrese de apuntar al elemento más específico y diseñar el contenedor para que se ajuste al resto de su diseño. Esto es solo un punto de partida funcional. Usar con cuidado. Demostración de trabajo en CodePen

h1 es un elemento de nivel de bloque. Necesitará usar algo como span, ya que es un elemento de nivel en línea (es decir, no abarca toda la fila).

En su caso, sugeriría lo siguiente:

style.css

.highlight 
{
   background-color: green;
}

html

<span class="highlight">only the text will be highlighted</span>

Como señalan las otras respuestas, puede agregar un background-colora<span> alrededor de su texto para que esto funcione.

Sin line-heightembargo, en el caso en que lo haya hecho , verá brechas. Para solucionar esto, puede agregar un box-shadowpoco de crecimiento a su lapso. También querrás box-decoration-break: clone;que FireFox lo represente correctamente.

EDITAR: si tiene problemas en IE11 con el cuadro de sombra, intente agregar un outline: 1px solid [color]; solo para IE solamente.

Esto es lo que parece en acción:

.container {
  margin: 0 auto;
  width: 400px;
  padding: 10px;
  border: 1px solid black;
}

h2 {
  margin: 0;
  padding: 0;
  font-family: Verdana, sans-serif;
  text-transform: uppercase;
  line-height: 1.5;
  text-align: center;
  font-size: 40px;
}

h2 > span {
  background-color: #D32;
  color: #FFF;
  box-shadow: -10px 0px 0 7px #D32,
    10px 0px 0 7px #D32,
    0 0 0 7px #D32;
  box-decoration-break: clone;
}

<div class="container">
    <h2><span>A HEADLINE WITH BACKGROUND-COLOR PLUS BOX-SHADOW :3</span></h2>
</div>

Intente eliminar el centro de alineación de texto y centre el <h1>o <div>el texto en el que reside.

h1 {
    background-color:green;
    margin: 0 auto;
    width: 200px;
}

puede usar la etiqueta de marca html5 dentro de la etiqueta de párrafo y encabezado.

<p>lorem ipsum <mark>Highlighted Text</mark> dolor sit.</p>

Puedes usar la <mark>etiqueta HTML5 .

HTML:

<h1><mark>The Last Will and Testament of Eric Jones</mark></h1>

CSS:

mark
{
    background-color: green;
}

Prueba este:

h1 {
    text-align: center;
    background-color: green;
    visibility: hidden;
}

h1:after {
    content:'The Last Will and Testament of Eric Jones';
    visibility: visible;
    display: block;
    position: absolute;
    background-color: inherit;
    padding: 5px;
    top: 10px;
    left: calc(30% - 5px);
}

Tenga en cuenta que calc no es compatible con todos los navegadores :) Solo quiero ser coherente con la alineación en la publicación original.

https://jsfiddle.net/richardferaro/ssyc04o4/

Debe mencionar el ancho de la etiqueta h1.

tu CSS será así

h1 {
text-align: center;
background-color: green;
width: 600px;
 }

HTML

<h1>
  <span>
    inline text<br>
      background padding<br>
      with box-shadow
  </span>
</h1> 

Css

h1{
  font-size: 50px;
  padding: 13px; //Padding on the sides so as not to stick.


  span {  
    background: #111; // background color
    color: #fff;
    line-height: 1.3; //The height of indents between lines.
    box-shadow: 13px 0 0 #111, -13px 0 0 #111; // Indents for each line on the sides.
  }
}

Demo en codepen

HTML

<h1 class="green-background"> Whatever text you want. </h1>

CSS

.green-background { 
    text-align: center;
    padding: 5px; /*Optional (Padding is just for a better style.)*/
    background-color: green; 
}